Apollo GraphQl 做出反应。如何清除所有变量组合的查询缓存？

Question

我在我的反应应用程序中使用 apollo graphql。 假设我有以下查询：

query ListQuery($filter: String!) {
   items(filter: $filter) {
     id
     name
   }
}

此查询让我可以使用过滤器查询项目列表。假设我使用了过滤器字符串 A，然后使用了过滤器字符串 B。缓存现在将包含两个条目：ListQuery(A) 和 ListQuery(B)。

现在假设我使用一个突变来添加一个新项目。如何从缓存中删除所有缓存的查询？所以在这种情况下，我想从缓存中删除 ListQuery(A) 和 ListQuery(B)。

我怎样才能做到这一点？

Answer 1

在你的情况下，你可以使用阿波罗的方法 客户端.resetStore();

它将清除先前的缓存，然后加载活动查询。

Answer 2

似乎您需要将refetchQueries option/prop 设置为查询名称字符串数组。该文档指出：

如果 options.refetchQueries 是一个字符串数组，那么 Apollo Client 将查找与提供的字符串同名的任何查询 并将使用它们当前的变量重新获取这些查询。

因此，作为使用graphql HOC 的示例，您可以尝试这样做：

function SomeComponent(props) {

  const performMutation = () => {
    props.doStuff({ refetchQueries: ["ListQuery"] })
      .then(/* ... */)
      .catch(/* ... */)
  }

  return (/* ... */)
}

export default graphql(DO_STUFF, { name: "doStuff" })(SomeComponent)

或者使用Mutation 组件：

function SomeComponent(props) {
  return (
    <Mutation
      mutation={DO_STUFF}
      refetchQueries={mutationResult => ["ListQuery"]}>
      {(doStuff, { loading, error }) => {
        /* ... */
      }}
    </Mutation>
  );
}

如果这不能满足您的需要，还有一个workaround using update option。

希望这会有所帮助。

Answer 3

试试这个：

 query ListQuery($filter: String!) {
       items(filter: $filter) {
         id
         name
       }
    },
    fetchPolicy: 'no-cache'

更多： https://www.apollographql.com/docs/react/caching/cache-interaction/#bypassing-the-cache

Answer 4

阅读获取政策 options.fetchPolicy

--编辑：--

但如果您只想重置一个查询，这只是一种技巧。要重置所有商店，请参阅@Nitin 的回答：将 fetchPolicy 设置为 network-only。刷新查询。将其返回到您选择的选项。