TanStack Query

npm install @tanstack/react-query
npm install --save-dev @tanstack/react-query-devtools

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      retry: 2,
    },
  },
});

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export type Project = {
  id: string;
  name: string;
  homepage: string;
};

export async function getProjects(signal?: AbortSignal): Promise<Project[]> {
  const response = await fetch("/api/projects", { signal });

  if (!response.ok) {
    throw new Error(`加载失败：${response.status}`);
  }

  return response.json();
}

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

export function ProjectList() {
  const projectsQuery = useQuery({
    queryKey: ["projects"],
    queryFn: ({ signal }) => getProjects(signal),
    staleTime: 2 * 60 * 1000,
  });

  if (projectsQuery.isPending) return <p>正在加载…</p>;
  if (projectsQuery.isError) {
    return <p role="alert">{projectsQuery.error.message}</p>;
  }

  return (
    <ul>
      {projectsQuery.data.map((project) => (
        <li key={project.id}>{project.name}</li>
      ))}
    </ul>
  );
}

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { createProject } from "./api";

export function AddProjectButton() {
  const queryClient = useQueryClient();
  const createMutation = useMutation({
    mutationFn: createProject,
    onSuccess: () =>
      queryClient.invalidateQueries({
        queryKey: ["projects"],
      }),
  });

  return (
    <button
      disabled={createMutation.isPending}
      onClick={() => createMutation.mutate({ name: "New project" })}
    >
      {createMutation.isPending ? "正在添加…" : "添加项目"}
    </button>
  );
}

const createMutation = useMutation({
  mutationFn: createProject,
  onMutate: async (draft) => {
    await queryClient.cancelQueries({ queryKey: ["projects"] });
    const previous = queryClient.getQueryData<Project[]>(["projects"]);

    queryClient.setQueryData<Project[]>(["projects"], (current = []) => [
      ...current,
      { id: "optimistic", ...draft },
    ]);

    return { previous };
  },
  onError: (_error, _draft, context) => {
    queryClient.setQueryData(["projects"], context?.previous);
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["projects"] });
  },
});

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

export function ProjectPage({ page }: { page: number }) {
  const query = useQuery({
    queryKey: ["projects", { page }],
    queryFn: ({ signal }) => getProjectPage(page, signal),
    placeholderData: keepPreviousData,
  });

  return (
    <>
      <ProjectGrid projects={query.data?.items ?? []} />
      {query.isFetching ? <span>正在更新…</span> : null}
    </>
  );
}

import {
  dehydrate,
  HydrationBoundary,
  QueryClient,
} from "@tanstack/react-query";

export default async function ProjectsPage() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["projects"],
    queryFn: () => getProjects(),
  });

  return (
    <HydrationBoundary state={dehydrate(queryClient)}>
      <ProjectList />
    </HydrationBoundary>
  );
}

npm run dev

# 发布前执行项目自己的检查
npm run typecheck
npm run build