TanStack Queryとは?
TanStack Queryとは、以前(バージョン3まで)はReact Queryと呼ばれていましたがバージョン4になり名称がTanStack Queryとなりました。
以前まではReact専用のライブラリでしたが、バージョンアップしてからはReactだけではなくSolid, Vue, Svelteなどでも利用できるようになりました。
TanStack Queryはデータフェッチライブラリで、APIからデータを取得したい時や更新したい時に使います。
また、取得したデータはキャッシュされ、キャッシュされたデータを取り出すことも可能です。
使い方
下準備編
-
以下コマンドでインストールを行います。
# npmの場合 $ npm i @tanstack/react-query # yarnの場合 $ yarn add @tanstack/react-query
-
TanStack Query を利用するコンポーネントを
QueryClientProvider
で囲みます。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とデータフェッチのための関数を渡すだけです。
const { isLoading, data } = useQuery({
queryKey: ['任意の文字列'] // 配列(空の場合は実行されない)
queryFn: hogeFugaFetch // データ取得関数(アロー関数をそのまま渡すことも可能)
});
useMutation編
データの追加や変更を行う際にはuseMutation
を使います。
フォーム入力データなどを受け取ってAPIに渡したい場合は、アロー関数で引数を渡す。
//
const mutationWithArg = useMutation({
mutationFn: (formData) => updateHoge(formData) // データ更新関数
});
// サブミットで受け取ったformDataをmutateメソッドを使って渡してあげる
const onSubmit = (formData) => {
mutationWithArg.mutate(formData);
};
useQueryClient & getQueryData編
キャッシュされたデータを取り出すにはuseQueryClient
フックとgetQueryData
メソッドを使います。
useQueryClientフックは、その時点のQueryClient取得し、この中のキャッシュされたデータやdefaultOptionsの設定情報などを取り扱うことができます。
QueryClientクラスのgetQueryDataメソッドを使ってキャッシュされたデータを取得します。
const queryClient: QueryClient = useQueryClient();
const data = queryClient.getQueryData(['取り出したいqueryKey']);
参考
TanStack Query
TanStack Queryとは?
TanStack Queryを使ってみる
TanStack Query v5 入門
初めてでも安心TanStack Query v5の基本的な設定方法と動きを学ぶ