Question

我在React项目中使用Apollo Boost安装了GraphQL客户端。这是一个简单的配置，如下所示：

import uuid from 'react-uuid';

import ApolloClient, { gql, InMemoryCache } from 'apollo-boost';

import { config } from '../configs/config';
import { sendNotification } from './ToastService';

const client = new ApolloClient({
  uri: config.url.API_URL,
  cache: new InMemoryCache({
    // eslint-disable-next-line no-underscore-dangle
    dataIdFromObject: (o): string | null => (o.id ? `${o.__typename}:${o.id}` : uuid()),
  }),
  onError: (({ graphQLErrors, networkError }): void => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message }) => {
        sendNotification({ type: 'error', title: 'Error', subtitle: message });
      });
    }

    if (networkError) {
      sendNotification({ type: 'error', title: 'Error', subtitle: networkError.message });
    }
  }),
});

export class GraphQLClient<T> {
  async query(query: string): Promise<T> {
    return client.query({ query: gql`query { ${query} }` })
      .then((response) => response.data)
  }
}

我的查询类似于以下内容，其中todo_list和两个children都是数组：

query {
  my_report {
    todo_list {
      id
      key
      value
      name
      children {
        id
        key
        value
        name
        children {
          id
          key
          value
          name
        }
      }
    }
  }
}

以前，我遇到的一个问题是，我的todo_list.children中的项目被全部检索为与第一个项目相同。所有列表中的id和key属性可能为NULL。然后，进行了一些研究，发现了此修补程序，并将其添加到了ApolloClient配置对象中：

dataIdFromObject: (o): string | null => (o.id ? `${o.__typename}:${o.id}` : uuid()),

因此，todo_list和todo_lis.children都符合预期（我可以在图 i ql上检查的结果相同）。但是，由于某种原因，我无法弄清楚此修复程序无法在todo_lis.children.children上运行。 todo_lis.children.children的结果带有重复的value，它们甚至都不是数组的一部分（例如，存在于另一个同级数组中）。而且，我已经检查并测试了图 i ql上的输出，这就是我所期望的。

我可疑的一件事是todo_list.children将所有id和key都设置为NULL（但是，它们都带有正确的值），但是todo_list.children.children拥有全部id设置了一些值（这是服务器的正确输出）。但是我真的不知道为什么它不能与dataIdFromObject函数一起使用，因为我正在为数组中的所有对象正确设置id。

感谢您的帮助。谢谢

Apollo客户端（反应）-嵌套数组中的项目重复

0 个答案: