TanStack Query：服务端缓存管理

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App";

// 1. 缓存客户端：整个应用就一份，所有缓存条目都存在它肚子里
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 30_000,  // 数据 30 秒内视为新鲜，不重复请求
      retry: 1,           // 失败重试 1 次（库默认 3 次）
    },
  },
});

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    // 2. 注入：组件树内任何 useQuery 都能拿到同一个实例
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

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

interface Todo { id: number; title: string; done: boolean; }

async function fetchTodos(): Promise<Todo[]> {
  const res = await fetch("/api/todos");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

function TodoList() {
  const { data, isPending, isError, error } = useQuery({
    queryKey: ["todos"],  // 这份数据的缓存 key
    queryFn: fetchTodos,  // 缓存未命中时怎么取
  });

  if (isPending) return <p>加载中…</p>;
  if (isError) return <p>加载失败：{error.message}</p>;

  return (
    <ul>
      {data.map((t) => <li key={t.id}>{t.title}</li>)}
    </ul>
  );
}

useQuery({ queryKey: ["todos"], ... })      // 全量列表

useQuery({ queryKey: ["todo", id], ... })   // 详情：id 变 = 换一条缓存

useQuery({
  queryKey: ["todos", { page, keyword }],   // 分页、搜索参数也进 key
  queryFn: () => fetchTodos({ page, keyword }),
});

import { useState, type FormEvent } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { addTodoApi } from "./api";

function AddTodo() {
  const [title, setTitle] = useState("");
  const queryClient = useQueryClient();  // 从「容器」拿到那个全局 client

  const addTodo = useMutation({
    mutationFn: (title: string) => addTodoApi(title),
    onSuccess: () => {
      // 等价于「更新 DB 后 @CacheEvict("todos")」：
      // 前缀匹配，所有以 "todos" 开头的缓存一起失效
      queryClient.invalidateQueries({ queryKey: ["todos"] });
    },
  });

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    if (!title.trim()) return;
    addTodo.mutate(title);
    setTitle("");
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button disabled={addTodo.isPending}>
        {addTodo.isPending ? "提交中…" : "添加"}
      </button>
    </form>
  );
}