前端使用 React Query 管理“服务器状态”的方法

npm install @tanstack/react-query

// main.tsx / index.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
const queryClient = new QueryClient();
export default function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

// api/todoApi.ts
export const fetchTodos = async () => {
  const res = await fetch('/api/todos');
  if (!res.ok) throw new Error('Failed to fetch todos');
  return res.json();
};
export const addTodo = async (title: string) => {
  const res = await fetch('/api/todos', {
    method: 'POST',
    body: JSON.stringify({ title }),
    headers: { 'Content-Type': 'application/json' }
  });
  if (!res.ok) throw new Error('Failed to add todo');
  return res.json();
};
export const deleteTodo = async (id: number) => {
  const res = await fetch(`/api/todos/${id}`, {
    method: 'DELETE'
  });
  if (!res.ok) throw new Error('Failed to delete todo');
  return res.json();
};

import { useQuery } from '@tanstack/react-query';
import { fetchTodos } from './api/todoApi';
export function TodoList() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['todos'],      // 缓存 key（全局唯一）
    queryFn: fetchTodos,      // 请求函数
    staleTime: 5000,          // 5 秒内不重新请求
    refetchOnWindowFocus: false, // 切回窗口不重新请求
  });
  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败</div>;
  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { addTodo } from './api/todoApi';
export function AddTodo() {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: (title: string) => addTodo(title),
    onSuccess() {
      // 手动刷新 todos 列表
      queryClient.invalidateQueries(['todos']);
    },
  });
  const handleAdd = () => {
    mutation.mutate('新的任务');
  };
  return (
    <button onClick={handleAdd} disabled={mutation.isPending}>
      {mutation.isPending ? '添加中...' : '添加 TODO'}
    </button>
  );
}

import { useMutation, useQueryClient } from '@tanstack/react-query';
import { deleteTodo } from './api/todoApi';
export function DeleteTodoButton({ id }) {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: () => deleteTodo(id),
    // 乐观更新
    onMutate: async () => {
      await queryClient.cancelQueries(['todos']);
      const previousTodos = queryClient.getQueryData(['todos']);
      queryClient.setQueryData(['todos'], (old: any[]) =>
        old.filter(todo => todo.id !== id)
      );
      return { previousTodos };
    },
    // 失败时回滚
    onError: (_err, _variables, context) => {
      queryClient.setQueryData(['todos'], context.previousTodos);
    },
    // 成功后真正拉取最新数据
    onSettled: () => {
      queryClient.invalidateQueries(['todos']);
    },
  });
  return (
    <button onClick={() => mutation.mutate()}>
      删除
    </button>
  );
}

export default function App() {
  return (
    <div>
      <h1>Todo 管理（React Query）</h1>
      <AddTodo />
      <TodoList />
    </div>
  );
}