Beyond useSWR: Mastering React Query for Robust Data Fetching

React developers constantly wrestle with server state: fetching, caching, synchronizing, and updating data. Tools like useEffect and useState are blunt instruments for this job, leading to race conditions, outdated UI, and boilerplate hell. React Query isn’t just a nicer API—it’s a paradigm shift. Here’s how to leverage it for production-grade resilience.

Why Fetching Libraries Fail

Traditional approaches treat server state as an ephemeral side effect. Common pitfalls:

• Stale Data: UI reflects cached values after a mutation.
• Over-Fetching: Duplicate requests across components.
• No Deduping: Six components render? Six identical requests.
• Silent Errors: No retries or fallbacks for flaky networks.

React Query attacks these by treating server state as a first-class citizen with built-in caching, background refetching, and atomic mutations.

Core Concepts in Practice

1. Queries as Declarative Dependencies
Instead of manually triggering fetches, declare what you need:

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

const fetchTasks = async () => {
  const res = await fetch("/api/tasks");
  if (!res.ok) throw new Error("Failed to fetch");
  return res.json();
};

const TaskList = () => {
  const { 
    data: tasks, 
    isError, 
    isLoading 
  } = useQuery({
    // Unique cache identifier   
    queryKey: ["tasks"], 
    queryFn: fetchTasks,
    // Configurable retries and state behaviors
    retry: 2, 
  });

  if (isLoading) return <Skeleton />;
  if (isError) return <FallbackUI />;
  
  return tasks.map(task => <TaskCard key={task.id} {...task} />);
};

Key Advantages:

• Automatic caching (tasks deduped across the app).
• Background revalidation when the tab regains focus.
• Smart garbage collection.

2. Mutations with Automatic Synchronization
Update data and instantly invalidate dependent queries:

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

const createTask = async (task: Task) => {
  await fetch("/api/tasks", {
    method: "POST",
    body: JSON.stringify(task),
  });
};

const TaskForm = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: createTask,
    // Automatically refetch 'tasks' query after mutation
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["tasks"] });
    },
    // Optional: Optimistically update UI before server response
    onMutate: async (newTask) => {
      await queryClient.cancelQueries({ queryKey: ["tasks"] });
      const prevTasks = queryClient.getQueryData<Task[]>(["tasks"]) || [];
      queryClient.setQueryData(["tasks"], [...prevTasks, newTask]);
      return { prevTasks };
    },
  });

  const onSubmit = (task: Task) => mutation.mutate(task);
  // Render form...
};

Why This Wins:

• invalidateQueries triggers a silent background refetch.
• Optimistic updates snappy UX during network latency.
• Rollback on error via onMutate’s context.

Advanced Patterns

Paginated Queries with Seamless UI
Paginated APIs need cursor tracking and preloading.
keepPreviousData ensures smooth list transitions:

const fetchProjects = async (page: number) => { /*...*/ };

const ProjectFeed = () => {
  const [page, setPage] = useState(0);
  const { data, isPreviousData } = useQuery({
    queryKey: ["projects", page],
    queryFn: () => fetchProjects(page),
    keepPreviousData: true, // Keep old data while fetching next page
  });

  return (
    <>
      {data?.projects.map(project => <ProjectCard {...project} />)}
      <button 
        onClick={() => setPage(old => old + 1)} 
        disabled={isPreviousData}
      >
        Next Page
      </button>
    </>
  );
};

When to Prefetch:
Use queryClient.prefetchQuery on mouse hovers to proactively load data.

Error Boundaries as Safety Nets
Wrap query-heavy components to catch errors:

const { ErrorBoundary } = ReactErrorBoundary;

const App = () => (
  <ErrorBoundary FallbackComponent={GlobalErrorUI}>
    <TaskList />
  </ErrorBoundary>
);

Configure useSuspense (v5+) for structural loading states.

Performance Pitfalls to Avoid

• Stale Time Tuning:
  Mobile users? Increase staleTime (default: 0) to avoid rapid refetches.
  useQuery({ staleTime: 60 * 1000 }) // Cache valid for 1 minute.

• Avoid Cache Bloat:
  Terminate unused queries automatically:

  typescriptКопировать

  new QueryClient({
    defaultOptions: {
      queries: { gcTime: 10 * 60 * 1000 }, // Garbage collect after 10m
    },
  });
  

• Parallel vs Dependent Queries:
  Fetch independent data with Promise.all, but chain dependents intelligently:

  typescriptКопировать

  const userQuery = useQuery({ queryKey: ['user'], queryFn: fetchUser });
  const projectsQuery = useQuery({
    queryKey: ['projects', userQuery.data?.id],
    queryFn: () => fetchProjects(userQuery.data.id),
    enabled: !!userQuery.data?.id, // Query only after user is loaded
  });
  

Debugging Like a Pro

React Query Devtools exposes cache state:

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

function App() {
  return (
    <>
      <MyComponent />
      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    </>
  );
}

Inspect:

• Active/inactive queries
• Cache timestamps
• Repeated requests

The Verdict

React Query isn’t a "fetch wrapper." It’s a server-state orchestrator critical for:

• Consistency: Automatic cache synchronization.
• Performance: Intelligent background updates.
• Resilience: Retries, fallbacks, and dependencies.

When to Reach for It:

• Apps with complex data dependencies.
• Projects demanding offline-ready UIs.
• Teams done with Redux middleware spaghetti.

Final Setup Tip:

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

Include a QueryClientProvider at your root. No global state required.

Forget manual loading trackers and imperative refetches. Structure your application around the data it consumes—not the other way around.