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

Question

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

Answer 1

把它放在你的 App.js 中

cache: new InMemoryCache({
    dataIdFromObject: o => o.id ? `${o.__typename}-${o.id}` : `${o.__typename}-${o.cursor}`,
  })

Answer 2

发生这种情况的原因是因为数组中的项目被"规范化"为Apollo缓存中的相同值.AKA,他们看起来和阿波罗一样.这通常是因为他们共享相同Symbol(id).

如果您打印出Apollo响应对象,您会注意到每个对象都有Symbol(id)Apollo缓存使用的对象.您的数组项可能具有相同的Symbol(id)重复项.为什么会这样？

默认情况下,Apollo缓存运行此函数进行规范化.

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时,文档说

InMemoryCache将回退到查询中对象的路径,例如ROOT_QUERY.allPeople.0,用于allPeople根查询返回的第一条记录.

当我们的数组项不能正常工作时,这是我们实际想要的行为defaultDataIdFromObject.

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

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