Tanstack Queryをキャッチアップしたい

目的

Tanstack Queryをプロジェクトで使用することになった。
元々データフェッチやAPI周りの知識も少なかったので、この機会にしっかりキャッチアップしたいと思った。

Tanctack Queryについて

about

Webアプリケーションのためのデータフェッチライブラリとしてよく説明されるが、より技術的な用語では、Webアプリケーションのフェッチ、キャッシュ、同期、およびサーバーステートの更新を容易にする。
React Queryから改名してTanstack Queryになった。Vueなどサーポート範囲が増えたらしい。
npm trendsによると直近1年では一番使用されている。

簡単な使い方

useQuery Hook を利用したコード。データフェッチはfetch関数で。

import { useQuery } from "@tanstack/react-query";

const fetchTodos = async () => {
  const res = await fetch("http://localhost:3001/todos");
  return res.json();
};

const Todo = () => {
  const { data: todos } = useQuery(["todos"], fetchTodos);

  return (
    <div>
      <h1>Todo一覧</h1>
      <ul>
        {todos?.map((todo) => (
          <li key={todo.id}>{todo.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Todo;

また、ルートファイルで QueryClientProvider、QueryClient の設定を行う。Todo コンポーネントで useQuery を利用するためには Todo コンポーネントを QueryClientProvider で wrap する必要がある。

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import Todo from './components/Todo';
import './App.css';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <Todo />
      </div>
    </QueryClientProvider>
  );
}

export default App;

useQuery の戻り値のオブジェクトは、 data 以外にもさまざまな情報が戻される。
参照：
useQuery | TanStack Query Docs

豊富なオプション

useQueryやuseMutationにオプションを渡すことができる。
POST リクエスト成功時に実行される onSuccess, エラー時に実行させる onError, 成功、エラーに関わらず実行される onSettled、POST リクエスト実行前に実行される onMutate などがある。
例えばonSuccessを使用すると、追加ボタンをクリックした後にリクエストが成功するとリロードなどを行わずに追加したデータをブラウザ上に反映することができる（リフェッチ処理ができる）。

import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
//略
const Todo = () => {
  const [name, setName] = useState('');
  const queryClient = useQueryClient();
//略
  const addMutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    },
  });
//略

残課題

optimistic updateについて、挙動や使用するべきケースを確認したい。
Optimistic Updates | TanStack Query Docs