如何使用大量活动查询更新 Apollo Cache

Question

我的 Apollo Cache 中存储了很多活动查询，例如：

items(isPublished: true, orderBy: "name", filterByName: "")
items(isPublished: true, orderBy: "name", filterByName: "home")
items(isPublished: false, orderBy: "name", filterByName: "home")
items(isPublished: true, orderBy: "age", filterByName: "home")
...

，因此，对于同一个查询 (GET_ITEMS)，有很多可能的变量，越来越多过滤器。当我想添加、移动或删除项目时，我使用 Mutation 组件的属性 update 更新 Apollo Cache，例如：

import gql from "graphql-tag";
import { Mutation } from "react-apollo";

const ADD_ITEM = gql`
  mutation AddItem(...
`;

...

<Mutation mutation={ADD_ITEM} variables={...} update={() => ...} />

但是，如果我想很好地更新所有缓存的查询...我该如何实现？我是否必须 cache.readQuery 和 cache.writeQuery 每个查询的内部更新函数？那对我来说太疯狂了。

我迷路了。提前致谢。

Answer 1

这是 ApolloClient 的不幸限制之一，但可以通过使用 apollo-link-watched-mutation 来解决。 Link 允许您通过 操作名称 关联突变和查询，这样对于具有特定操作名称的任何突变，可以更新具有特定操作名称的所有查询。这种方法的最大缺点是它将更新逻辑移到了您的组件之外并移到了您的客户端配置中，这可能会使事情变得有点混乱。

示例用法，给定名为 AddItem 的突变和名为 Items:

的查询

const cache = new InMemoryCache()
const link = new WatchedMutationLink(cache, {
  AddItem: {
    Items: ({ mutation, query }) => {
      const addedItem = mutation.result.data.addItem
      const items = query.result.items
      const items.push(addedItem)
      return {
         ...query.result,
        items,
      }
    }
  }
})

请注意，您可以检查传递给函数的查询和变更以确定需要更改的内容（如果有）。根据查询的实际情况，您的实际代码可能会有所不同，这只是一个示例。有关更多详细信息，请参阅文档。

如何使用大量活动查询更新 Apollo Cache

How update Apollo Cache with a lot of active queries

apollo

reactjs

graphql

react-apollo

graphql-tag