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

与所有API请求一样，GraphQL查询是异步的，因此，如果尚未从服务器到达数据，则无法记录数据。

如果您在记录数据之前先检查数据是否存在，就可以使用。

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

Answer 2

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

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

这等效于

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

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

Answer 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;
      },
    },
  },
});

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

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

3 个答案: