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)），然后就可以对副本执行所需的操作。