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

问题描述

我是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>
  );
};

我只看到“你好，世界，应该是数据：”，但是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不打印/为空？

解决方法

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

在分解对象时，涉及到键时必须准确。如果需要将数据保存在名为returnData的变量中，则可以执行以下操作：

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

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

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

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