How to set up TanStack Query in a React app?

Install the @tanstack/react-query package via npm, create a QueryClient instance, and wrap your app with QueryClientProvider. Then use hooks like useQuery for data fetching, following the examples in the official docs for quick integration.

TanStack Query vs SWR: which is better?

TanStack Query offers more features out of the box, such as mutations, pagination, and advanced caching, while SWR is lighter and simpler. Choose TanStack Query for complex data-intensive apps and SWR for basic fetching with minimal overhead.

How to implement infinite scroll with TanStack Query?

Use the useInfiniteQuery hook, which handles pagination automatically by providing methods to fetch more data and manage scroll state. This built-in support makes it easy to create infinite scrolling interfaces without custom logic.

What are the best practices for caching with TanStack Query?

Configure staleTime and cacheTime based on your data freshness needs, use invalidation with mutations, and leverage background updates. The library's automatic caching strategies reduce manual work but require tuning for optimal performance.

How to handle errors in TanStack Query mutations?

Use the onError callback in useMutation to manage errors, retry logic, or display user feedback. This allows graceful error handling while maintaining data consistency across your application.

Can TanStack Query be used with Vue or Svelte?

Yes, TanStack Query has official adapters for Vue, Svelte, and Solid.js, allowing you to use the same core logic with framework-specific hooks. This makes it versatile for multi-framework teams or projects.

Open-Awesome

React Query

MITTypeScriptrelease-2026-04-19-1059

An async state management library that simplifies fetching, caching, synchronizing, and updating server state for web applications.

Visit Website GitHub

49.2k stars3.8k forks0 contributors

What is React Query?

TanStack Query is an asynchronous state management library that simplifies fetching, caching, synchronizing, and updating server state in web applications. It handles complex data operations like background updates, pagination, and mutations while reducing boilerplate code. The library is protocol-agnostic and works with REST, GraphQL, promises, and other data sources.

Target Audience

Frontend developers building data-intensive web applications with React, Vue, Svelte, or Solid who need robust server-state management. It's particularly valuable for teams dealing with complex data fetching, caching, and synchronization requirements.

Value Proposition

Developers choose TanStack Query because it provides a comprehensive, declarative approach to server-state management with zero configuration for common use cases. Its automatic caching, background updates, and intelligent refetching strategies eliminate manual state management complexity while ensuring optimal performance.

Overview

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.

Use Cases

Best For

Managing server state in React applications with complex data dependencies
Implementing pagination and infinite scroll with automatic caching
Handling background data synchronization and updates
Reducing boilerplate code for data fetching and caching
Building applications that require optimistic updates and mutations
Managing dependent queries where one query relies on another's result

Not Ideal For

Static websites or applications with no dynamic data fetching requirements
Teams already using full-stack frameworks like Next.js with built-in data fetching solutions such as SWR
Projects where minimizing JavaScript bundle size is the highest priority and a lighter alternative is preferred

Pros & Cons

Pros

Declarative API

Allows developers to define data operations declaratively, reducing boilerplate code as emphasized in the library's philosophy of simplifying server-state management.

Intelligent Caching

Provides automatic caching and background updates with configurable refetching strategies, key for handling server-state efficiently without manual intervention.

Built-in Pagination

Native support for paginated data and infinite scroll interfaces, simplifying common data presentation patterns directly from the key features list.

Protocol Agnostic

Works with REST, GraphQL, promises, and other data sources, offering flexibility in data fetching as highlighted in the protocol-agnostic fetching feature.

Cons

Bundle Size Impact

Adds to the JavaScript bundle, which can affect load times in performance-sensitive applications, as indicated by the bundle size badge in the README.

Initial Setup Complexity

Requires configuring QueryClient and wrapping the application with providers, adding overhead for small projects where simpler solutions might suffice.

Steep Learning for Advanced Use

Features like dependent queries and custom cache invalidation have a learning curve that can slow down new developers, despite the comprehensive documentation.

Frequently Asked Questions

Related Projects

axios

Promise based HTTP client for the browser and node.js

Stars109,011

Forks11,650

Last commit18 hours ago

swr

React Hooks for Data Fetching

Stars32,351

Forks1,332

Last commit5 days ago

wretch

A tiny wrapper built around fetch with an intuitive syntax. :candy:

Stars5,165

Forks107

Last commit8 days ago

SWRV

Stale-while-revalidate data fetching for Vue

Stars2,282

Forks76