はじめに
この記事では、TanStack Query v5 の基本的な利用方法について記載します。
TanStack Query は、以前は React Query と呼ばれていましたが、v4 以降は TanStack Query という名称が正式のようです。1
開発環境
開発環境は以下の通りです。
- Windows11
- VSCode
- TypeScript 5.2.2
- React 18.2.0
- TabStack Query 5.20.2
パッケージのインストール
以下のコマンドで TanStack Query をインストールします。
npm i @tanstack/react-query
また、以下のコマンドで ESLint Plugin Query をインストールすることができます。
npm i -D @tanstack/eslint-plugin-query
プラグインのインストール後、.eslintrc.json に以下の値を追加することで、推奨設定を適用できます。
.eslintrc.json
{
"extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
}
実装
まず、TanStack Query を利用するコンポーネントを QueryClientProvider で囲みます。
QueryClientProvider の props には、QueryClient を渡します。
index.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import CoreConcepts from "./core-concepts/page";
import { Route } from "@/app/type";
const queryClient = new QueryClient();
export default function TanStackQuery() {
return (
<QueryClientProvider client={queryClient}>
<CoreConcepts />
</QueryClientProvider>
);
}
次に QueryClientProvider で囲んだ子コンポーネントでデータ取得処理を実装します。
データ取得処理には useQuery を利用します。引数の queryFn にリクエスト処理を渡します。戻り値で取得したデータやデータの取得状況などを得ることができます。
CoreConcepts.tsx
import { useQuery } from "@tanstack/react-query";
export default function CoreConcepts() {
const { isPending, error, data } = useQuery({
queryKey: [],
queryFn: () =>
fetch("https://official-joke-api.appspot.com/random_joke").then((res) =>
res.json()
),
});
console.log(
"status:",
status,
"\nisPending:",
isPending,
"\nerror:",
error,
"\ndata:",
data
);
if (isPending) return "Processing...";
if (error) return `An error has occurred: ${error.message}`;
return (
<ul>
<li>- Type: {data.type}</li>
<li>- Setup: {data.setup}</li>
<li>- Punchline: {data.punchline}</li>
</ul>
);
}
動作確認
ひと通り実装できたので、動作確認をしてみます。
まとめ
データ取得処理だけであれば、簡単に実装できました。
他にも機能がたくさんあったので、実際に実装したり、使いどころを考えていきたいです。