TanStack QueryとReact 19の新機能をどう使い分けるか

import { Suspense, use } from 'react';
import { getTodos } from './server';

// React の use だけで読む。Promise は自分で Map にキャッシュする。
const cache = new Map<string, Promise<string[]>>();
function fetchTodos() {
  if (!cache.has('todos')) cache.set('todos', getTodos());
  return cache.get('todos')!;
}

// キャッシュを捨てる。次の描画で fetchTodos が新しく取得する。
export function clearTodos() {
  cache.delete('todos');
}

function TodoCount() {
  const todos = use(fetchTodos());
  return <p>{todos.length}件</p>;
}

import { Suspense } from 'react';
import { queryOptions, useSuspenseQuery } from '@tanstack/react-query';
import { getTodos } from './server';

// TanStack Query で読む。キャッシュは QueryClient が持つ。
export const todosQuery = queryOptions({
  queryKey: ['todos'],
  queryFn: getTodos,
});

function TodoCount() {
  const { data } = useSuspenseQuery(todosQuery);
  return <p>{data.length}件</p>;
}

$ node list.mjs ./out/ListUse.mjs
./out/ListUse.mjs 待つ時間 1100ms staleTime 指定なし
  1. 一覧を開いた: 閉じる / 読み込み中…  [getTodos 1回, addTodo 0回]
  2. 応答が届いた: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  3. サーバーで1件増えたあと、一覧を閉じた: 開く  [getTodos 1回, addTodo 0回]
  4. もう一度開いた直後: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  5. 待っている応答を返した: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]

$ node list.mjs ./out/ListQuery.mjs
./out/ListQuery.mjs 待つ時間 1100ms staleTime 指定なし
  1. 一覧を開いた: 閉じる / 読み込み中…  [getTodos 1回, addTodo 0回]
  2. 応答が届いた: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  3. サーバーで1件増えたあと、一覧を閉じた: 開く  [getTodos 1回, addTodo 0回]
  4. もう一度開いた直後: 閉じる / 1件 / 牛乳を買う  [getTodos 2回, addTodo 0回]
  5. 待っている応答を返した: 閉じる / 2件 / 牛乳を買う / 卵を買う  [getTodos 2回, addTodo 0回]

$ node list.mjs ./out/ListQuery.mjs 1100 60000
./out/ListQuery.mjs 待つ時間 1100ms staleTime 60000
  1. 一覧を開いた: 閉じる / 読み込み中…  [getTodos 1回, addTodo 0回]
  2. 応答が届いた: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  3. サーバーで1件増えたあと、一覧を閉じた: 開く  [getTodos 1回, addTodo 0回]
  4. もう一度開いた直後: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  5. 待っている応答を返した: 閉じる / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]

import { useActionState } from 'react';
import { useQueryClient } from '@tanstack/react-query';
import { addTodo } from './server';
import { TodoPage, todosQuery } from './ListQuery';

// 送信は useActionState。一覧は TanStack Query。送信のあとにキャッシュを無効にする。
export function AddPage() {
  const queryClient = useQueryClient();
  const [message, formAction, isPending] = useActionState(
    async (_prev: string, formData: FormData) => {
      await addTodo(String(formData.get('title')));
      await queryClient.invalidateQueries({ queryKey: todosQuery.queryKey });
      return '追加しました';
    },
    '',
  );

  return (
    <>
      <form action={formAction}>
        <input name="title" />
        <button disabled={isPending}>{isPending ? '追加中…' : '追加'}</button>
        {message && <span>{message}</span>}
      </form>
      <TodoPage />
    </>
  );
}

$ node add.mjs ./out/AddUse.mjs
./out/AddUse.mjs 
  1. 一覧が届いた: ヘッダー：1件 / 追加 / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  2. 「卵を買う」を送信した直後: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]
  3. addTodo の応答が届いた: ヘッダー：1件 / 追加 / 追加しました / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]
  4. 待っている応答をもう一度返した: ヘッダー：1件 / 追加 / 追加しました / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]

$ node add.mjs ./out/AddUse.mjs clear
./out/AddUse.mjs clear あり
  1. 一覧が届いた: ヘッダー：1件 / 追加 / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  2. 「卵を買う」を送信した直後: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]
  3. addTodo の応答が届いた: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 2回, addTodo 1回]
  4. 待っている応答をもう一度返した: ヘッダー：1件 / 追加 / 追加しました / 2件 / 牛乳を買う / 卵を買う  [getTodos 2回, addTodo 1回]

$ node add.mjs ./out/AddQuery.mjs
./out/AddQuery.mjs 
  1. 一覧が届いた: ヘッダー：1件 / 追加 / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  2. 「卵を買う」を送信した直後: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]
  3. addTodo の応答が届いた: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 2回, addTodo 1回]
  4. 待っている応答をもう一度返した: ヘッダー：2件 / 追加 / 追加しました / 2件 / 牛乳を買う / 卵を買う  [getTodos 2回, addTodo 1回]

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { addTodo } from './server';
import { TodoPage, todosQuery } from './ListQuery';

// 送信も TanStack Query の useMutation で行う。
export function AddPage() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: todosQuery.queryKey }),
  });

  return (
    <>
      <form action={(formData) => mutation.mutate(String(formData.get('title')))}>
        <input name="title" />
        <button disabled={mutation.isPending}>{mutation.isPending ? '追加中…' : '追加'}</button>
        {mutation.isSuccess && <span>追加しました</span>}
      </form>
      <TodoPage />
    </>
  );
}

$ node add.mjs ./out/AddMutation.mjs
./out/AddMutation.mjs 
  1. 一覧が届いた: ヘッダー：1件 / 追加 / 1件 / 牛乳を買う  [getTodos 1回, addTodo 0回]
  2. 「卵を買う」を送信した直後: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 1回, addTodo 1回]
  3. addTodo の応答が届いた: ヘッダー：1件 / 追加中… / 1件 / 牛乳を買う  [getTodos 2回, addTodo 1回]
  4. 待っている応答をもう一度返した: ヘッダー：2件 / 追加 / 追加しました / 2件 / 牛乳を買う / 卵を買う  [getTodos 2回, addTodo 1回]

$ node user.mjs
setUserId をそのまま呼ぶ
  1. a さんを表示: 次の人 / a さんのTODO 1件  [getTodos 1回, addTodo 0回]
  2. 「次の人」を押した直後: 次の人 / 読み込み中…  [getTodos 2回, addTodo 0回]
  3. b さんの応答が届いた: 次の人 / b さんのTODO 1件  [getTodos 2回, addTodo 0回]

$ node user.mjs transition
startTransition で包む
  1. a さんを表示: 次の人 / a さんのTODO 1件  [getTodos 1回, addTodo 0回]
  2. 「次の人」を押した直後: 次の人 / 切り替え中… / a さんのTODO 1件  [getTodos 2回, addTodo 0回]
  3. b さんの応答が届いた: 次の人 / b さんのTODO 1件  [getTodos 2回, addTodo 0回]