GraphQL：react-apollo 客户端覆盖数组元素

【问题标题】：GraphQL: react-apollo client overwrites array elementsGraphQL：react-apollo 客户端覆盖数组元素
【发布时间】：2017-12-11 16:13:27
【问题描述】：

我有一个返回项目数组的 GraphQL 查询。我可以在 GraphiQL 中运行查询并得到我期望的结果。

我有一个 react 应用程序，它使用 react-apollo 和 @graphql 装饰器来解析对组件道具的相同查询。通过react-apollo 运行查询时，返回数组中的每一项都是相同的——每一项都被最后一项“覆盖”。

我可以在开发工具网络选项卡中看到正确的数组项是通过网络发送的，因此问题似乎与 react-apollo 有关。什么可能导致 react-apollo 覆盖数组元素？

【问题讨论】：

能贴出代码吗？
发布涉及 GraphQL 模式、服务器、react 应用程序和 react-redux 实现的代码并不实际。在这种情况下，虽然我不确定是否有必要 - 我想问是否有任何常见的错误配置原因可能导致这种情况。
既然你说 GraphiQL 给你预期的结果，我认为你的服务器代码没有问题。问题可能出在客户端。我记得任何常见的原因。即减速器？

【解决方案1】：

问题是我的qgl 查询片段不包含数组中项目的id 属性。

如果您遇到类似问题，请确保您的架构在每个项目上都包含 id 或 _id 属性；每个id 值都是唯一的，并且您在查询中请求id 属性。或者，您可以在客户端中提供 dataIdFromObject 函数来动态生成值的 ID。

您可以在 Normalization with dataIdFromObject 的 Apollo 文档中阅读更多内容

【讨论】：

如果id 存在但它是一个对象，你似乎也会得到这种奇怪的行为。我的查询返回了一个 JSON 结构，如 [{ "id": { "value": 1 } }, { "id": { "value": 2 } }]，显然这不起作用。我已经将我的数据展平了，现在它可以工作了。