web-dev-qa-db-ja.com

Apollo GraphQlは反応します。すべての変数の組み合わせのクエリキャッシュをクリアする方法は？

反応アプリケーションでapollo graphqlを使用しています。次のクエリがあるとします。

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

このクエリでは、フィルターを使用してアイテムのリストをクエリできます。たとえば、フィルター文字列Aを使用し、次にフィルター文字列Bを使用したとします。キャッシュには、ListQuery（A）とListQuery（B）の2つのエントリが含まれるようになります。

ここで、突然変異を使用して新しいアイテムを追加するとします。キャッシュされたすべてのクエリをキャッシュから削除するにはどうすればよいですか？したがって、この場合、ListQuery（A）とListQuery（B）の両方をキャッシュから削除します。

どうすればこれを達成できますか？

cachingreact-apollo
20
Andy Hansen

あなたの場合、apolloのメソッドclient.resetStore（）;を使用できます。

以前のキャッシュをクリアしてから、アクティブなクエリを読み込みます。

5
Nitin

必要なのは refetchQueries option/propがクエリ名文字列の配列に設定されるようです。ドキュメントには次のように記載されています。

Options.refetchQueriesが文字列の配列である場合、Apolloクライアントは提供された文字列と同じ名前のクエリを探し、それらのクエリを現在の変数で再フェッチします。

したがって、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>
  );
}

これがどういうわけかあなたが必要とすることをしないなら、 updateオプションを使用する回避策 もあります。

お役に立てれば。

1
streletss