Question

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

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

此查询允许我使用过滤器查询项目列表。假设我使用过滤字符串A，然后使用过滤字符串B.缓存现在包含两个条目：ListQuery（A）和ListQuery（B）。

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

我该如何做到这一点？

Answer 1

在您的情况下，您可以使用apollo的方法 client.resetStore（）;

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

Answer 2

好像您需要的是refetchQueries选项/ 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 设置为仅限网络。刷新查询。将其返回到您选择的选项。

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

4 个答案: