Claude Code के साथ TanStack Query

TanStack Queryでserver状態managementをoptimizationする

TanStack Query（旧React Query）はserver状態のfetch・cache・syncを宣言的にmanagementするlibrary है।Claude Code का उपयोग करके、complexなcache戦略や楽観的updateも素早くimplementationでき है।

basic query設計

Claude Codeにdatafetchpatternを依頼 करें।

> TanStack Queryでuserlistのqueryをबनाओ。
> pageネーション、searchフィルタ、自動リフレッシュsupportで。

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

// querykeyfactoryー
export const userKeys = {
  all: ["users"] as const,
  lists: () => [...userKeys.all, "list"] as const,
  list: (filters: UserFilters) => [...userKeys.lists(), filters] as const,
  details: () => [...userKeys.all, "detail"] as const,
  detail: (id: string) => [...userKeys.details(), id] as const,
};

interface UserFilters {
  page: number;
  perPage: number;
  search?: string;
  role?: string;
}

export function useUsers(filters: UserFilters) {
  return useQuery({
    queryKey: userKeys.list(filters),
    queryFn: () => fetchUsers(filters),
    placeholderData: keepPreviousData,
    staleTime: 5 * 60 * 1000, // 5分बीचはcacheを使用
    refetchOnWindowFocus: true,
  });
}

export function useUser(id: string) {
  return useQuery({
    queryKey: userKeys.detail(id),
    queryFn: () => fetchUser(id),
    enabled: !!id,
    staleTime: 10 * 60 * 1000,
  });
}

楽観的updateのimplementation

ミューテーションと楽観的updateのpatternをClaude Codeにgenerateしてもらい है।

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

export function useUpdateUser() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (data: { id: string; updates: Partial<User> }) =>
      updateUser(data.id, data.updates),

    onMutate: async ({ id, updates }) => {
      // 進行मेंのqueryをキャンセル
      await queryClient.cancelQueries({ queryKey: userKeys.detail(id) });

      // 現在のdataをbackup
      const previousUser = queryClient.getQueryData(userKeys.detail(id));

      // cacheを楽観的にupdate
      queryClient.setQueryData(userKeys.detail(id), (old: User) => ({
        ...old,
        ...updates,
      }));

      return { previousUser };
    },

    onError: (_err, { id }, context) => {
      // error時にrollback
      if (context?.previousUser) {
        queryClient.setQueryData(userKeys.detail(id), context.previousUser);
      }
    },

    onSettled: (_data, _error, { id }) => {
      // 成功・失敗に関わらず再fetch
      queryClient.invalidateQueries({ queryKey: userKeys.detail(id) });
      queryClient.invalidateQueries({ queryKey: userKeys.lists() });
    },
  });
}

無限scrollのimplementation

useInfiniteQueryを使った無限scrollもClaude Code से素早くimplementationでき है।

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

export function useInfiniteUsers(search?: string) {
  return useInfiniteQuery({
    queryKey: ["users", "infinite", { search }],
    queryFn: ({ pageParam }) =>
      fetchUsers({ page: pageParam, perPage: 20, search }),
    initialPageParam: 1,
    getNextPageParam: (lastPage) =>
      lastPage.hasNext ? lastPage.page + 1 : undefined,
    getPreviousPageParam: (firstPage) =>
      firstPage.hasPrev ? firstPage.page - 1 : undefined,
  });
}

function UserInfiniteList() {
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
    useInfiniteUsers();

  const users = data?.pages.flatMap((page) => page.users) ?? [];

  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
      {hasNextPage && (
        <button onClick={() => fetchNextPage()} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? "Loading..." : "もっとदेखना"}
        </button>
      )}
    </div>
  );
}

プリフェッチとSSRsupport

Next.js आदिでのserverサイドプリフェッチもimplementationでき है।

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

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

  await queryClient.prefetchQuery({
    queryKey: userKeys.list({ page: 1, perPage: 20 }),
    queryFn: () => fetchUsers({ page: 1, perPage: 20 }),
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function UsersPage({
  dehydratedState,
}: {
  dehydratedState: unknown;
}) {
  return (
    <HydrationBoundary state={dehydratedState}>
      <UserList />
    </HydrationBoundary>
  );
}

カスタムqueryhookのpattern

実務では再利用possibleなカスタムhook के रूप में設計し है।

function useOptimisticDelete<T extends { id: string }>(
  queryKey: readonly unknown[],
  deleteFn: (id: string) => Promise<void>
) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: deleteFn,
    onMutate: async (id) => {
      await queryClient.cancelQueries({ queryKey });
      const previous = queryClient.getQueryData(queryKey);

      queryClient.setQueryData(queryKey, (old: T[] | undefined) =>
        old?.filter((item) => item.id !== id)
      );

      return { previous };
    },
    onError: (_err, _id, context) => {
      queryClient.setQueryData(queryKey, context?.previous);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey });
    },
  });
}

Summary

TanStack Queryはserver状態managementのcomplexさを大幅に軽減してくれ है।Claude Code का लाभ उठाकर、querykey設計、楽観的update、無限scroll आदिのcomplexなpatternもकम समय मेंimplementationpossible है।

状態managementの全体設計はZustand状態managementガイドを、APIの型safe性はtRPC型safeAPIdevelopmentをदेखें。TanStack Queryofficial documentationもconfirmしておきましょう。