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の基本的な設定方法と動きを学ぶ