Apollo 将第一个结果复制到边数组中的每个节点

Question

我正在使用react-apollo开发一个react应用程序当我检查浏览器网络选项卡响应时，通过 graphql 调用数据，它显示数组的所有元素都不同但我在我的应用程序中得到的或 console.log() 然后数组的所有元素与第一个元素相同。我不知道如何解决请帮忙

Answer 1

发生这种情况的原因是因为数组中的项目被“标准化”为 Apollo 缓存中的相同值。也就是说，它们在 Apollo 看来是一样的。这种情况通常会发生，因为它们共享相同的 Symbol(id)。

如果打印 Apollo 响应对象，您会注意到每个对象都有 Apollo 缓存使用的 Symbol(id)。您的数组项可能具有相同的 Symbol(id) ，这会导致它们重复。为什么会出现这种情况？

默认情况下，Apollo 缓存运行此 function进行标准化。

export function defaultDataIdFromObject(result: any): string | null {
  if (result.__typename) {
    if (result.id !== undefined) {
      return `${result.__typename}:${result.id}`;
    }
    if (result._id !== undefined) {
      return `${result.__typename}:${result._id}`;
    }
  }
  return null;
}

您的数组项属性会导致多个项返回相同的数据 ID。就我而言，多个项目具有 _id = null 这导致所有这些项目被重复。当此函数返回 null 时 docs说

InMemoryCache will fall back to the path to the object in the query, such as ROOT_QUERY.allPeople.0 for the first record returned on the allPeople root query.

当我们的数组项不能很好地与 defaultDataIdFromObject 配合使用时，这就是我们真正想要的行为。

因此，解决方案是使用传递给 ApolloClient 内的 InMemoryCache 构造函数的 dataIdFromObject 选项手动配置这些唯一标识符。以下内容对我有用，因为我的所有对象都使用 _id 并具有 __typename。

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    dataIdFromObject: o => (o._id ? `${o.__typename}:${o._id}`: null),
  })
});