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不打印/为空？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）