In this post, we’ll walk through replacing a Context + `useState`/`useEffect` setup for managing “operations” with a clean, scalable TanStack React Query implementation. By the end, you’ll have: - Less boilerplate - Automatic caching, deduplication, and background refetch - Easy cache invalidation and optimistic updates - A single custom hook for both queries and mutations ## Why React Query? - **Automatic Caching & Deduplication** One network request per unique key, shared across components. - **Background Refetch & Stale‑While‑Revalidate** Keeps data fresh on window focus or at configured intervals. - **Easy Cache Invalidation** `queryClient.invalidateQueries(['operations', userId])` refreshes related data. - **Optimistic Updates** Update the UI immediately and roll back on error. - **Less Boilerplate** No more manual loading/error state or custom context providers. ## Step 1: Add QueryClientProvider ```tsx // app/layout.tsx or pages/_app.tsx import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ## Step 2: Create `useOperations` Custom Hook ```tsx // hooks/useOperations.ts import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; import { getOperationsByUserId, addOperation } from '@/actions/actions'; import type { Operation } from '@/types/enums'; export function useOperations(userId: string) { const queryClient = useQueryClient(); // 1) Fetch and cache operations const query = useQuery( ['operations', userId], async () => { const data = await getOperationsByUserId(userId); return data.map(op => ({ ...op, createdAt: new Date(op.createdAt), updatedAt: new Date(op.updatedAt), })); }, { staleTime: 1000 * 60 * 5, // 5 minutes refetchOnWindowFocus: true, } ); // 2) Mutation with optimistic update const mutation = useMutation( (newOp: Operation) => addOperation(newOp), { onMutate: async newOp => { await queryClient.cancelQueries(['operations', userId]); const previous = queryClient.getQueryData(['operations', userId]) || []; queryClient.setQueryData(['operations', userId], [newOp, ...previous]); return { previous }; }, onError: (err, newOp, context: any) => { if (context?.previous) { queryClient.setQueryData(['operations', userId], context.previous); } }, onSettled: () => { queryClient.invalidateQueries(['operations', userId]); }, } ); return { ...query, addOperation: mutation.mutate, }; } ``` ## Step 3: Update `GenerateImageForm` Component ```tsx "use client"; import React, { useState } from 'react'; import { useForm } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; import { useToast } from '@/components/Toast/use-toast'; import { useCreditsContext } from '@/components/Credits/CreditsContext'; import { useAuth } from '@/components/Auth/AuthContext'; import { useOperations } from '@/hooks/useOperations'; import { generateImage } from '@/actions/actions'; import type { formSchema } from '@/schemas/generate-image'; import type { z } from 'zod'; import LoadingSpinner from '@/components/Loading/LoadingSpinner'; import { Button } from '../ui/button'; export default function GenerateImageForm() { const { toast } = useToast(); const { setCreditsDirectly } = useCreditsContext(); const { user } = useAuth(); const userId = user?.uid!; // Use the custom hook const { mutate: addOperation } = useOperations(userId); const [isLoading, setIsLoading] = useState(false); const [imageUrl, setImageUrl] = useState(null); const form = useForm>({ resolver: zodResolver(formSchema), defaultValues: { hairColor: 'blonde', eyeColor: 'blue', skinColor: 'light', hairStyle: 'short', eyebrowStyle: 'thin', lipShape: 'full', gender: 'male', }, }); const onSubmit = async (values: z.infer) => { setIsLoading(true); try { // Prepare payload const formData = new FormData(); Object.entries(values).forEach(([key, value]) => { formData.append(key, value); }); // Generate image const response = await generateImage(formData); // Update credits if (typeof response.updatedCredits === 'number') { setCreditsDirectly(response.updatedCredits); } // Show toast if (response.success) { setImageUrl(response.images?.[0]?.url || null); toast({ title: 'Success!', description: response.message }); } else { toast({ title: 'Generation Failed', description: response.message, variant: 'destructive', }); } // Add operation via React Query if (response.newOperation) { addOperation(response.newOperation); } } catch { toast({ title: 'Error', description: 'Unexpected error. Please try again.', variant: 'destructive', }); } finally { setIsLoading(false); } }; return ( ); } ``` ## Conclusion By refactoring to TanStack React Query: - **You removed manual context and state management**, replacing it with a standardized query/mutation API. - **Your UI is faster and more resilient**, thanks to caching, background refetch, and optimistic updates. - **Maintenance is easier**, since all related logic lives in one custom hook. Adopting React Query early will pay dividends as your app grows and your data needs become more complex. Happy coding! 🎉

Refactoring Next.js Operations Management with TanStack React Query