Practical React Query

React Query Guide

This skill provides comprehensive guidance on React Query (TanStack Query) for building modern React applications with async state management.

When to Use This Skill

Use this skill when you need help with:

• Setting up and configuring React Query
• Data fetching, caching, and synchronization
• Mutations and optimistic updates
• Error handling and retry strategies
• TypeScript integration
• Testing React Query code
• Performance optimization
• Advanced patterns and best practices

Topics

Read the relevant reference file based on what you need:

Getting Started

Core Concepts

Data Handling

Mutations & Updates

State & Error Handling

Performance

Integration

Advanced

Quick Reference

Basic Query

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

function Component() {
  const { data, isLoading, error } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });
}

Basic Mutation

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

function Component() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["todos"] });
    },
  });
}

Query Client Setup

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}