TanStack Query？何それ？

TanStack Queryとは？

TanStack Queryとは、以前（バージョン3まで）はReact Queryと呼ばれていましたがバージョン4になり名称がTanStack Queryとなりました。
以前まではReact専用のライブラリでしたが、バージョンアップしてからはReactだけではなくSolid, Vue, Svelteなどでも利用できるようになりました。

TanStack Queryはデータフェッチライブラリで、APIからデータを取得したい時や更新したい時に使います。
また、取得したデータはキャッシュされ、キャッシュされたデータを取り出すことも可能です。

使い方

下準備編

1. 以下コマンドでインストールを行います。

   Copied!

   # npmの場合
   $ npm i @tanstack/react-query
   
   # yarnの場合
   $ yarn add @tanstack/react-query
   

2. TanStack Query を利用するコンポーネントをQueryClientProviderで囲みます。

   Copied!

   import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
   import CoreConcepts from "./core-concepts/page";
   import { Route } from "@/app/type";
   
   const queryClient: QueryClient = new QueryClient({
     defaultOptions: {
       queries: {
         refetchOnWindowFocus: false, // デフォルトでコンポーネントにフォーカスが当たるとフェッチするのを無効化
       },
     },
   });
   
   function MyApp({ Component, pageProps }: AppProps) {
     return (
       <QueryClientProvider client={queryClient}>
         <App />
       </QueryClientProvider>
     );
   }
   

useQuery編

データ取得には、useQueryを使います。
queryKeyとqueryFnオプションにキャッシュ識別のためのkeyとデータフェッチのための関数を渡すだけです。

Copied!

const { isLoading, data } = useQuery({
  queryKey: ['任意の文字列'] // 配列（空の場合は実行されない）
  queryFn: hogeFugaFetch // データ取得関数(アロー関数をそのまま渡すことも可能)
});

useMutation編

データの追加や変更を行う際にはuseMutationを使います。
フォーム入力データなどを受け取ってAPIに渡したい場合は、アロー関数で引数を渡す。

Copied!

// 
const mutationWithArg = useMutation({
  mutationFn: (formData) => updateHoge(formData) // データ更新関数
});

// サブミットで受け取ったformDataをmutateメソッドを使って渡してあげる
const onSubmit = (formData) => {
    mutationWithArg.mutate(formData);
};

useQueryClient & getQueryData編

キャッシュされたデータを取り出すにはuseQueryClientフックとgetQueryDataメソッドを使います。

useQueryClientフックは、その時点のQueryClient取得し、この中のキャッシュされたデータやdefaultOptionsの設定情報などを取り扱うことができます。
QueryClientクラスのgetQueryDataメソッドを使ってキャッシュされたデータを取得します。

Copied!

const queryClient: QueryClient = useQueryClient();
const data = queryClient.getQueryData(['取り出したいqueryKey']);

参考

TanStack Query
TanStack Queryとは？
TanStack Queryを使ってみる
TanStack Query v5 入門
初めてでも安心TanStack Query v5の基本的な設定方法と動きを学ぶ