快速入门

1import {2  useQuery,3  useMutation,4  useQueryClient,5  QueryClient,6  QueryClientProvider,7} from "@tanstack/react-query";8import { getTodos, postTodo } from "../my-api";9 10// 创建一个 client11const queryClient = new QueryClient();12 13function App() {14  return (15    // 提供 client 至 App16    <QueryClientProvider client={queryClient}>17      <Todos />18    </QueryClientProvider>19  );20}21 22function Todos() {23  // 访问 client24  const queryClient = useQueryClient();25 26  // 查询27  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos });28 29  // 修改30  const mutation = useMutation({31    mutationFn: postTodo,32    onSuccess: () => {33      // 错误处理和刷新34      queryClient.invalidateQueries(["todos"]);35    },36  });37 38  return (39    <div>40      <ul>41        {query.data.map((todo) => (42          <li key={todo.id}>{todo.title}</li>43        ))}44      </ul>4546      <button47        onClick={() => {48          mutation.mutate({49            id: Date.now(),50            title: "Do Laundry",51          });52        }}53      >54        Add Todo55      </button>56    </div>57  );58}59 60render(<App />, document.getElementById("root"));