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

【问题标题】：GraphQL returns data but undefined in codeGraphQL 返回数据但在代码中未定义
【发布时间】：2026-01-14 06:55:02
【问题描述】：

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

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

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

dev tools image

但是当我在下面的代码中注销它时，它返回 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>
    );
  }

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

【问题讨论】：

嘿，你解决了吗？如果是，请发布回复。

标签： reactjs graphql react-apollo apollo-client

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

这相当于

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

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

【讨论】：

【解决方案3】：

我也遇到过类似情况。

我将一个 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;
      },
    },
  },
});

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

【讨论】：