TanStack Query v5 mit Claude Code: Server State Management 2026

# Prompt: "Migriere meine React Query v4 Queries zu TanStack Query v5" // v4 (ALT): const { data, isLoading } = useQuery(['user', userId], () => fetchUser(userId)); // v5 (NEU) — object-only Syntax! const { data, isLoading, isFetching } = useQuery({ queryKey: ['user', userId], queryFn: () => fetchUser(userId), staleTime: 5 * 60 * 1000, // 5 Minuten gcTime: 10 * 60 * 1000, // ehemals cacheTime in v4 enabled: !!userId, // Nur fetchen wenn userId vorhanden placeholderData: keepPreviousData, // v5: importierbar statt keepPreviousData option }); // Query Options Pattern — wiederverwendbar: export const userQueryOptions = (userId: string) => queryOptions({ queryKey: ['user', userId], queryFn: () => fetchUser(userId), staleTime: 60_000, }); // Verwendung in Component + Prefetch: const { data: user } = useQuery(userQueryOptions(userId)); // In Route-Loader (React Router v6): await queryClient.ensureQueryData(userQueryOptions(userId)); // Select: nur relevante Daten abonnieren const { data: userName } = useQuery({ ...userQueryOptions(userId), select: (user) => user.name, // Re-render nur wenn Name sich aendert });

# Prompt: "Todo-Liste mit optimistischem Toggle — sofort im UI, Rollback bei Fehler" const toggleTodo = useMutation({ mutationFn: (todoId: string) => updateTodo(todoId, { completed: true }), onMutate: async (todoId) => { // Laufende Refetches stoppen await queryClient.cancelQueries({ queryKey: ['todos'] }); // Snapshot fuer Rollback const prev = queryClient.getQueryData<Todo[]>(['todos']); // Optimistisches Update queryClient.setQueryData<Todo[]>(['todos'], (old) => old?.map(t => t.id === todoId ? { ...t, completed: !t.completed } : t) ?? [] ); return { prev }; // Context fuer onError }, onError: (err, todoId, context) => { // Rollback auf Snapshot queryClient.setQueryData(['todos'], context?.prev); toast.error('Aktualisierung fehlgeschlagen'); }, onSettled: () => { // Immer: echte Daten laden queryClient.invalidateQueries({ queryKey: ['todos'] }); }, }); // v5: mutateAsync fuer await-Verwendung const handleToggle = async (id: string) => { try { await toggleTodo.mutateAsync(id); toast.success('Aktualisiert!'); } catch (e) { // Fehler bereits in onError behandelt } };

// app/users/page.tsx — Server Component import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query'; export default async function UsersPage() { const queryClient = new QueryClient(); // Server-seitig prefetchen await queryClient.prefetchQuery({ queryKey: ['users'], queryFn: fetchUsers, // Direkter DB-Call auf Server! }); return ( // Dehydrierter State wird zum Client gesendet <HydrationBoundary state={dehydrate(queryClient)}> <UserList /> {/* Client Component — Cache bereits befuellt */} </HydrationBoundary> ); } // UserList.tsx (Client Component) — kein Loading-State! function UserList() { const { data: users } = useQuery({ queryKey: ['users'], queryFn: fetchUsers, // Vom Server hydratisiert — kein Netzwerk-Call! }); return users?.map(u => <UserCard key={u.id} user={u} />); }

# Prompt: "Infinite Scroll Feed mit useInfiniteQuery" const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({ queryKey: ['feed', filter], queryFn: ({ pageParam }) => fetchFeed({ cursor: pageParam, limit: 20, filter }), initialPageParam: undefined as string | undefined, getNextPageParam: (lastPage) => lastPage.nextCursor, // undefined = kein naechste Seite getPreviousPageParam: (firstPage) => firstPage.prevCursor, }); // Alle Posts aus allen Seiten flach: const posts = data?.pages.flatMap(page => page.posts) ?? []; // IntersectionObserver Trigger: const { ref } = useIntersection({ onIntersect: () => { if (hasNextPage) fetchNextPage(); }, }); return ( <div> {posts.map(p => <PostCard key={p.id} post={p} />)} <div ref={ref}>{isFetchingNextPage && <Spinner />}</div> </div> );