React / Apollo：显示 GraphQL 查询的结果（useQuery 挂钩）

Question

我是 react/graphql/apollo 的新手，但是我遵循了有关如何在 www.apollographql.com 上使用 Apollo 进行 graphql 查询的指南。但是我似乎无法显示结果。

这是我执行查询的代码

import React from "react";
import { useQuery } from 'react-apollo';
import gql from "graphql-tag";

const GET_PRODUCTS = gql`
  query getProducts{
    products(first: 1) {
      edges {
        node {
          id
          name
        }
      }
    }
}
`;

const StartPage = () => {
  const { loading, error, returnData } = useQuery(GET_PRODUCTS, {
    variables: {},
  });
 
  return (
    <p>Hello world, this should be the data: {returnData}</p>
  );
};

我只看到“Hello world，这应该是数据：”但没有打印 returnData？ 我不能只打印整个响应吗？

当我重新加载页面时，我可以在网络选项卡中清楚地看到我的查询 确实被执行了，我得到了正确的回应

请求

{"operationName":"getProducts","variables":{},"query":"query getProducts {\n  products(first: 1) {\n    edges {\n      node {\n        id\n        name\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"} 

回复

{"data":{"products":{"edges":[{"node":{"id":"UHJvZHVjdDo3Mg==","name":"Apple Juice","__typename":"Product"},"__typename":"ProductCountableEdge"}],"__typename":"ProductCountableConnection"}}}

那么有没有人知道为什么 returnData 没有打印/为空？

Answer 1

应该是const { loading, error, data } = useQuery(GET_PRODUCTS, ...); 注意：data 而不是returnData。

当你解构对象时，你需要在关键点上准确无误。如果您需要将数据保存在名为returnData 的变量中，您可以执行以下操作：

const { loading, error, data: returnData } = useQuery(GET_PRODUCTS, {
  variables: {},
});

还要注意，在 React 中，您不能只在花括号内渲染对象，React 需要一个字符串或一个数字。为了快速调试，您可以添加

return (
  <p>Hello world, this should be the data: {JSON.stringify(returnData)}</p
);

否则，您应该从返回对象的深处显示数据。