React Cheatsheet 11 — TanStack Query

npm i @tanstack/react-query

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

const qc = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60_000,
      retry: 1,
      refetchOnWindowFocus: false,
    },
  },
});

<QueryClientProvider client={qc}>
  <App />
</QueryClientProvider>

const { data, isLoading, error } = useQuery({
  queryKey: ["users", id],
  queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),
});

if (isLoading) return <p>loading</p>;
if (error) return <p>{(error as Error).message}</p>;
return <p>{data.name}</p>;

["users"]                              // list
["users", { page: 1, q: "x" }]         // filtered list
["users", id]                          // detail
["users", id, "posts"]                 // nested

const { data } = useSuspenseQuery({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),
});

// data is non-nullable; component suspends until ready

const m = useMutation({
  mutationFn: (data: NewUser) => fetch("/api/users", {
    method: "POST",
    body: JSON.stringify(data),
  }).then(r => r.json()),
  onSuccess: () => qc.invalidateQueries({ queryKey: ["users"] }),
});

m.mutate({ name: "A" });

const m = useMutation({
  mutationFn: updateUser,
  onMutate: async (newUser) => {
    await qc.cancelQueries({ queryKey: ["users", newUser.id] });
    const prev = qc.getQueryData(["users", newUser.id]);
    qc.setQueryData(["users", newUser.id], newUser);
    return { prev };       // context for rollback
  },
  onError: (_err, _new, ctx) => {
    if (ctx?.prev) qc.setQueryData(["users", _new.id], ctx.prev);
  },
  onSettled: (_, _e, vars) => {
    qc.invalidateQueries({ queryKey: ["users", vars.id] });
  },
});

qc.invalidateQueries({ queryKey: ["users"] });
qc.invalidateQueries({ queryKey: ["users", id] });
qc.invalidateQueries({ predicate: (q) => q.queryKey[0] === "users" });

qc.invalidateQueries({ exact: true });   // only exact key, no children

const user = useQuery({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),
});

const posts = useQuery({
  queryKey: ["posts", user.data?.id],
  queryFn: () => fetchPosts(user.data!.id),
  enabled: !!user.data,
});

const q = useInfiniteQuery({
  queryKey: ["feed"],
  queryFn: ({ pageParam = 0 }) => fetchFeed({ cursor: pageParam }),
  getNextPageParam: (last) => last.nextCursor,
  initialPageParam: 0,
});

q.data?.pages.flatMap(p => p.items);
q.fetchNextPage();
q.hasNextPage;
q.isFetchingNextPage;

const [page, setPage] = useState(0);

const q = useQuery({
  queryKey: ["users", page],
  queryFn: () => fetchUsers(page),
  placeholderData: keepPreviousData,
});

useQuery({
  queryKey: ["jobs"],
  queryFn: fetchJobs,
  refetchInterval: 5000,
  refetchIntervalInBackground: false,
});

qc.setQueryData(["user", id], updated);
qc.getQueryData(["user", id]);
qc.removeQueries({ queryKey: ["user", id] });
qc.resetQueries();

await qc.prefetchQuery({
  queryKey: ["user", id],
  queryFn: () => fetchUser(id),
});

const queries = useQueries({
  queries: ids.map((id) => ({
    queryKey: ["user", id],
    queryFn: () => fetchUser(id),
  })),
});

function fetchUser(id: number): Promise<User> { ... }

const q = useQuery({
  queryKey: ["user", id] as const,
  queryFn: () => fetchUser(id),
});

q.data;     // User | undefined

function makeQuery<T>(
  schema: z.ZodSchema<T>,
  key: unknown[],
  url: string,
) {
  return useQuery({
    queryKey: key,
    queryFn: async () => schema.parse(await (await fetch(url)).json()),
  });
}

npm i -D @tanstack/react-query-devtools

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

<QueryClientProvider client={qc}>
  <App />
  <ReactQueryDevtools />
</QueryClientProvider>