[TanStack Query]invalidateQueries vs. setQueryData

はじめに

最近、TanStack Query の invalidateQueries と setQueryData の2つのメソッドを実装に使ってみました。
これらのメソッドは、クエリのキャッシュを無効化するか、クエリのデータを更新する際に使用できます。
この記事では、これらのメソッドの違いと、どのメソッドを使うべきかをまとめてみました。

tl:dr;

1. invalidateQueriesについて
2. setQueryDataについて
3. invalidateQueries vs. setQueryData の違い
4. 使い分け

invalidateQueries

invalidateQueries メソッドを使用すると、クエリ・キーや、クエリのその他の機能的にアクセス可能なプロパティ/状態に基づいて、キャッシュ内の単一または複数のクエリを無効にしてリフェッチすることができます。デフォルトでは、マッチしたクエリは即座に無効とマークされ、 アクティブなクエリはバックグラウンドでリフェッチされます。

https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetqueriesdata

invalidateQueries メソッドは、指定したキャッシュキーを持つすべてのクエリを無効化します。
無効化されたクエリは、次のリクエストで再取得されます。

1. 特定のキャッシュキーを渡して invalidateQueries を呼び出します。

   import { invalidateQueries } from 'react-query';
   
   const invalidateAllQueries = () => {
     invalidateQueries(['posts']);
   };
   

2. 特定のキャッシュキーを渡して invalidateQueries を呼び出し、特定のキャッシュキーを無効化します。

   const invalidatePostQuery = () => {
     invalidateQueries(['posts', 'post-1']);
   };
   

setQueryData

setQueriesData は同期関数で、フィルタ関数を使用したり、クエリキーに部分的にマッチしたりすることで、複数のクエリのキャッシュデータを即座に更新することができます。渡された queryKey あるいは queryFilter にマッチするクエリのみが更新され、新しいキャッシュエントリは作成されません。setQueryData が既存のクエリごとにコールされます。

https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientsetqueriesdata

setQueryData メソッドは、指定したキャッシュキーに新しいデータをセットします。
このメソッドは、クエリのキャッシュを更新するために使用できます。

1. 特定のキャッシュキーと新しいデータを渡して setQueryData を呼び出します。

   import { setQueryData } } from 'react-query';
   
   const updatePost = (postId, updatedPost) => {
     setQueryData(['posts', postId], updatedPost);
   };
   
   // 例: 1000 を post-1 の ID として使ってみる
   updatePost('post-1', { id: 'post-1', title: 'Updated Post' });
   

invalidateQueries vs. setQueryData の違い

• invalidateQueries: すべての指定したキャッシュキーに対してクエリを無効化します。

• setQueryData: 特定のキャッシュキーに対して新しいデータを更新します。

  特徴	invalidateQueries	setQueryData
  クエリキャッシュの無効化	すべてのキャッシュ	特定のキャッシュ
  クエリキャッシュの更新	なし	あり
  クエリキャッシュの再取得	再取得	再取得
  クエリキャッシュのキャッシュされたデータのリロード	なし	あり
  クエリキャッシュのキャッシュされたデータのリロードに必要なリクエスト数	1	1
  クエリキャッシュのキャッシュされたデータのリロードに必要なリクエスト数 (キャッシュキーがない場合)	1	0
  クエリキャッシュのキャッシュされたデータのリロードに必要なリクエスト数 (キャッシュキーが存在しない場合)	1	1
  クエリキャッシュのキャッシュされたデータのリロードに必要なリクエスト数 (キャッシュキーが存在する場合)	1	0

使い分け

どのメソッドを使うべきかは、アプリの使用方法やデータの更新頻度に応じて判断できます。

• 特定のキャッシュキーに対して新しいデータを更新する場合: setQueryData を使う
  • postが作成・更新された場合、post IDキャッシュキーに紐ついたデータを作成・更新したい時
• すべてのキャッシュキーを無効化する場合: invalidateQueries を使う
  • 新しいpostが作成された場合、posts一覧に紐ついたキャッシュキーを無効し、posts一覧をリフェッチしたい時
  • 特定の post を削除した場合、post IDキャッシュキーに紐ついたデータを無効化したい時

最後に

TanStack Query のメソッド invalidateQueries と setQueryData メソッドの違いと使い分け方をまとめてみました。
ご興味のある方は、ドキュメントや公式サイトをご参照いただけますと幸いです。