react-apollo：如何处理 update 和 updateQuery 中的不变性？

Question

我在我的 React 应用程序中使用 react-apollo。现在需要分页来获取更多数据。独立于分页，如何更新updateQuery 或update 中的状态？将深层嵌套的数据结构视为不可变会使其冗长，但我不想为其添加帮助程序库。

fetchMore({
  variables: {
    cursor: cursor,
  },
  updateQuery: (previousResult, { fetchMoreResult }) => {
    return {
      ...previousResult,
      author: {
        ...previousResult.author,
        articles: {
          ...previousResult.author.articles,
          ...fetchMoreResult.author.articles,
          edges: [
            ...previousResult.author.articles.edges,
            ...fetchMoreResult.author.articles.edges,
          ],
        }
      }
    }
  },

改变previousResult 是否可以，还是违背了阿波罗的哲学？

const { pageInfo, edges } = fetchMoreResult.author.articles;
previousResult.author.articles.edges.concat(edges);
previousResult.author.articles.pageInfo = pageInfo;
return previousResult;

或者还有其他更新状态的方法吗？

Answer 1

From the docs:

请注意，该函数不得更改 prev 对象（因为 prev 与返回的新对象进行比较，以查看函数进行了哪些更改，因此需要更新哪些 prop）。

我会硬着头皮使用immutability-helper，就像文档推荐的那样。除此之外，您可以先制作对象的副本 (Object.assign({}, fetchMoreResult))，然后您可以对副本执行您想要的操作。