query
🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
JavaScript library that automatically handles fetching data from APIs, caching results, showing loading states, and keeping data fresh, so you stop writing the same data-fetching boilerplate in every component.
TanStack Query is a library for managing the state that comes from a server or remote data source in a JavaScript or TypeScript web application. In a typical web app, you constantly need to fetch data from an API, show loading states while waiting, handle errors, keep the data fresh when it changes, and avoid redundantly re-fetching data that you already have. Writing all this logic manually leads to repetitive, error-prone code scattered throughout an application. TanStack Query provides a set of tools that handle all of this automatically.
The core idea is that you describe a query using a key and a function that fetches the data. The library then handles caching the result, reusing it when the same data is requested in multiple places on the page, automatically refetching it in the background when it becomes stale, and showing your component the current state including whether it is loading, has data, or has errored. It also handles mutations, which are write operations like submitting a form or deleting a record, and can automatically invalidate cached queries after a mutation so related data refreshes. Advanced features include pagination, infinite scrolling, prefetching data before navigation, and request cancellation.
You would use TanStack Query when building a React, Vue, Svelte, or SolidJS application that makes API calls and you want to avoid writing your own caching and synchronization logic from scratch. It is widely used in production web applications to simplify data-fetching code. The library works with any protocol, whether REST, GraphQL, or any promise-based fetch. It is installed as an npm package, written in TypeScript, and the framework-specific versions like React Query are thin wrappers around a shared framework-agnostic core.
Where it fits
- Fetch data from a REST or GraphQL API in a React component and automatically show loading and error states.
- Cache API responses so the same data is only fetched once even when multiple components on the page need it.
- Submit a form and automatically refresh related data on the page after the mutation succeeds.
- Implement infinite scrolling by fetching the next page of results as the user scrolls down.