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

Question

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

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

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

开发工具图片

但是当我在下面的代码中将它注销时，它返回 undefined。

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);

这在旧项目上运行良好，而不是在新项目中。 我可以看到在网络选项卡中返回的数据，但它在我的组件中仍未定义。 即使加载更改为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;
      },
    },
  },
});

添加此内容后，数据开始在我的组件中正常显示。

Answer 2

与所有 API 请求一样，GraphQL 查询是异步的，因此如果数据尚未从服务器到达，则无法记录数据，这看起来您正在尝试这样做。

如果您在记录之前检查以确保数据存在，它将起作用。

if (data) {
   console.log(data);
}

Answer 3

Query组件使用的 render props 函数被传递一个对象作为它的第一个也是唯一的参数。 loading 、 error和data都是该对象的属性。 换句话说，使用解构语法，您可以像这样访问它们：

{({ loading, error, data }) => {
  console.log(data)
  ...
}

这相当于

{(props) => {
  console.log(props.data)
  ...
}

当然，因为 GraphQL 请求是异步的，所以在请求完成之前data将是未定义的，因此您的代码也需要反映这一事实。