Guide · Open source
How to use TanStack Query: install, fetch data and cache it
Updated · written with AI from the project's own documentation and checked against our catalogue data
TanStack Query is an open-source library for managing data that lives on a server, such as the results of API calls. It handles fetching, caching, keeping data in sync and updating it after changes, so you write less loading and caching code by hand. This guide explains what the library is for, what you need before you start, and how to set it up and use it in a web app.
TanStack QueryTanStack/query · ★ 50.5k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm Node.js is installed and that your project uses React, Solid, Svelte, or Vue.
- 2Read the official docs. Open https://tanstack.com/query and follow the install steps for your framework, since the README does not list a package install command.
- 3Install the library for your framework. Add the TanStack Query package for your framework to your project using the steps in the docs.
- 4Fetch server data. Write a query that calls your API, and let the library handle loading state and results.
- 5Add caching and refetching. Use the built-in caching and refetching so data stays in sync without extra code.
- 6Update data with mutations. Send changes to the server with mutations and refresh the affected data afterward.
What TanStack Query does and who it is for
TanStack Query is a code library, not an end-user app. Its job is to manage server data in a web application: fetching it from an API, caching the results, keeping them in sync and updating them after changes. The README describes it as protocol-agnostic, so it works with REST, GraphQL, or any promise-based fetching.
- Frontend developers building apps that load data from a server
- Teams using React, Solid, Svelte, or Vue who want less hand-written loading and caching code
- Apps that need pagination, infinite scroll, or background refresh of data
What you need before you install TanStack Query
The source lists two prerequisites: Node.js, and an existing JavaScript framework project. The library has versions for React, Solid, Svelte, and Vue, so your project should use one of these frameworks.
- Node.js installed on your machine
- A JavaScript framework project using React, Solid, Svelte, or Vue
- Basic familiarity with JavaScript or TypeScript (the library is written in TypeScript)
Install TanStack Query in your project
The README's install instructions show how to clone the repository. The source does not list a package-manager install command, so check the official documentation at tanstack.com/query for the exact steps for your framework's package before you install.
- Clone the repository to explore the source: git clone https://github.com/TanStack/query
- See CONTRIBUTING.md in the repository for setup instructions if you plan to contribute
git clone https://github.com/TanStack/queryCore ideas: queries, caching and refetching
According to the README, the library provides caching, refetching, pagination and infinite scroll, mutations, dependent queries, background updates, prefetching, cancellation, and React Suspense support. Start with the basics: fetch data, let the library cache it, and let it refetch when needed, instead of writing your own loading and caching logic.
For full API details, usage examples and framework-specific guides, read the documentation at https://tanstack.com/query.
- Caching: stored results are reused instead of fetched again
- Refetching: data is refreshed to stay in sync with the server
- Mutations: send changes to the server and update data after them
- Pagination and infinite scroll: load data in pages or as the user scrolls
Know when TanStack Query is the wrong choice
The library adds complexity without benefit if your site is simple and static with no server data. It is also not a ready-made app for non-developers. Comparable projects named in the analysis include SWR, Apollo Client, and RTK Query, which you can compare against your needs.
- Skip it for a simple static site with no server data
- Skip it if you need a finished application rather than a code library
What people use it for
- Loading a list of items from a REST API and reusing the cached result across pages
- Building a feed with infinite scroll that loads more data as the user scrolls
- Refreshing data in the background so users see up-to-date information
- Running dependent queries where one request needs the result of another
- Prefetching data before a user navigates to a screen
Frequently asked questions
Is TanStack Query free to use?
The source says TanStack Query is open source and released under the MIT licence. Check the licence file in the repository for the full terms.
What do I need to install TanStack Query?
You need Node.js and a JavaScript framework project using React, Solid, Svelte, or Vue. The library is written in TypeScript and supports TS and JS projects.
Does TanStack Query work with REST and GraphQL?
Yes. The README says it is protocol-agnostic and works with REST, GraphQL, or any promise-based fetching.
What is the difference between TanStack Query and SWR?
Both manage server data in frontend apps, and SWR is one of the comparable projects named in the analysis. The source does not compare them in detail, so review each project's documentation to see which fits your app.
Is TanStack Query only for React?
No. The source lists versions for React, Solid, Svelte, and Vue, with the names React Query, Solid Query, Svelte Query, and Vue Query.
Can I use TanStack Query for a simple static website?
The source says it adds complexity without benefit for a simple static site with no server data, so it is better suited to apps that load data from a server.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
TanStack Query suits frontend developers building apps that load and update server data with React, Solid, Svelte, or Vue, especially when they need caching, pagination, or background refresh. It is not worth the added complexity for a static site with no server data, and it is not a finished app for non-developers.
Install options & downloads