@tanstack/useQuery を初めて触ってみた

tanstack/react-query は現在ver4
ネットにある記事はver3も紛れているので気をつける
ver3 は クエリキーが string型

const {data,isLoading,isError,error,isFetching,isPreviousData} = useQuery( ["user_list"],

よくある語句

• isLoading クエリにまだデータがない
• isError クエリでエラーが発生
• isSuccess クエリ成功、データが利用可能
• error クエリが isError 状態にある場合、error プロパティを利用して状態を確認できる
• data クエリ成功状態の場合、data プロパティを介して利用できる

導入方法

_app.tsx などのルートで定義する

const queryClient = new QueryClient();

<QueryClientProvider client={queryClient}>
  {/* コンポーネント */}
</QueryClientProvider>

注意したいこと

• 初期状態だと、useQuery()は三回実行される
• コンポーネント毎に処理を書くと肥大化するのでカスタムフック化したほうがいい。

関数

const queryClient = useQueryClient();

queryClient.removeQueries(['キー名']);

指定したキャッシュを削除

queryClient.invalidateQueries()

キャッシュ内の単一または複数のクエリを、それらのクエリ キーまたはその他の機能的にアクセス可能なクエリのプロパティ/状態に基づいて無効化し、再フェッチする

queryClient.refetchQueries()

クエリを再取得する

queryClient.resetQueries(queryKey, { exact: true })

キャッシュ内のクエリを、クエリキーやその他の機能的にアクセス可能なプロパティ/状態に基づいて初期状態に戻す
clear()とは異なり、購読者に通知され、`invalidateQueries()'と異なり、クエリをロード前の状態にリセットします。クエリが initialData を持つ場合、クエリのデータはその値にリセットされます。クエリがアクティブな場合、それはリフェッチされます。

queyClient.getQueryData(["キー名"]);

getQueryData既存のクエリのキャッシュされたデータを取得するために使用できる同期関数です。
クエリが存在しない場合、undefinedが返されます。

queryClient.clear()

すべてのキャッシュを削除する

refetch()

useMutation()

書き込み処理時の状態管理を行う
書き込み成功時にキャッシュを再取得したりなどなど。
Axiosと併用する時、共通化が難しい...