Menu
On this page

Data Fetching with React Query

Learn how to use TanStack Query for server state management, caching, and data synchronization

TanStack Query (formerly React Query) is the go-to solution for managing server state in React applications. Unlike traditional state management solutions like Redux, it specifically handles async data — making API calls, caching responses, and keeping data in sync. I chose it because it eliminates boilerplate code, provides automatic refetching, and has excellent DevTools for debugging. The pattern shown here separates concerns: the service layer handles API calls, the provider wraps the app, and hooks consume the data — making the codebase clean and maintainable.

I use TanStack Query here because of its powerful caching, auto-refetching, and DevTools. However, you can achieve similar results with native fetch + useEffect, Axios with custom hooks, SWR, or even RTK Query. The key concepts — separating API logic, handling loading/error states, and caching — apply regardless of the library you choose.

How it works

lib/
└── providers/
    └── react-query-provider.tsx  # Query client provider

services/
└── stock-service.ts              # API service with hooks

app/
└── layout.tsx                    # Root layout with provider

components/
└── StockDashboard.tsx            # Example usage component

Caching

Automatic caching reduces API calls and improves performance.

Auto Refetch

Configurable refetch intervals keep data up-to-date automatically.

Devtools

Built-in devtools for debugging queries and cache state.

Key Features

  • •Automatic caching and background refetching
  • •Built-in loading and error states
  • •Optimistic updates for better UX
  • •Pagination and infinite scroll support
  • •DevTools for debugging

Live Example
API

Loading...

How this demo works:

  • • Real API: Fetching live stock data from Twelve Data API
  • • Caching: React Query caches responses, switching back is instant
  • • Loading State: Built-in loading state management
  • • Error Handling: Automatic error handling with retry option
  • • Refresh: Click refresh to refetch latest data from API