reactjs - GraphQL 返回数据但在代码中未定义

Question

我正在使用以下 gql 查询发出 GraphQL 请求。

export const GET_DETAILS = gql`
  query ($id: String) {
    country(id: $id) {
      currency
      phone
    }
  }
`;

当我在 chrome 开发工具的网络选项卡中检查其响应时，我看到以下内容:

dev tools image

但是当我在下面的代码中注销它时，它返回未定义。

render() {
    return (
      <div>
        <Query query={GET_DETAILS} variables={{ id: `${this.props.match.params.code}` }}>
            {(loading, error, data) => {
              {console.log(data)} // ----> Here it is undefined

              return (
                <div>
                </div>
              );
            }}
        </Query>
      </div>
    );
  }

知道我做错了什么以及如何解决吗？

Answer 1

我有过类似的情况。

我将 React 组件从一个项目复制到另一个项目，连同 gql 查询。

const { loading, data } = useQuery<NotificationsData>(GET_NOTIFICATIONS);

这在旧项目上运行良好，但在新项目上运行不佳。我可以在网络选项卡中看到返回的数据，但它在我的组件中仍未定义。即使 loading 更改为 false。

这是我的gql查询

query UserDetails {
  userDetails {
    id
    username
    first_name
    last_name
    avatar_url
    initials @client
  }
}

这里的问题是线路

initials @client

所以，我忘了在我的 index.tsx 文件中为 @client 字段添加解析器。

类似于:

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    UserEntity: {
      initials: (user, _args, { cache }) => {
        let initials = user.first_name[0];
        if (user.last_name && user.last_name.length) {
          initials = initials + user.last_name[0];
        }
        return initials;
      },
    },
  },
});

添加这个之后，数据开始在我的组件中正常显示。