explaingit

tanstack/query

★ 49,335TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((repo))
    What it does
      Fetch API data
      Cache responses
      Show loading states
      Handle mutations
    Key features
      Auto refetch
      Pagination support
      Request deduplication
    Tech Stack
      TypeScript
      React Vue Svelte
      SolidJS
    Who uses it
      Frontend developers
      Web app teams
      API integrators
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Fetch data from a REST or GraphQL API in a React component and automatically show loading and error states.

USE CASE 2

Cache API responses so the same data is only fetched once even when multiple components on the page need it.

USE CASE 3

Submit a form and automatically refresh related data on the page after the mutation succeeds.

USE CASE 4

Implement infinite scrolling by fetching the next page of results as the user scrolls down.

Tech stack

TypeScriptJavaScriptReactVueSvelteSolidJS

Getting it running

Difficulty · easy Time to first run · 30min

Install the framework-specific package such as @tanstack/react-query and wrap your app in a QueryClientProvider.

In plain English

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.

Copy-paste prompts

Prompt 1
Using TanStack Query with React, write a component that fetches a list of posts from /api/posts, shows a loading spinner while waiting, and displays the posts when ready.
Prompt 2
Show me how to use TanStack Query's useMutation hook to submit a form to POST /api/users and then invalidate the users list cache so it re-fetches automatically.
Prompt 3
Write a React component using TanStack Query that implements infinite scroll for an /api/items endpoint that accepts a page query parameter.
Prompt 4
Using TanStack Query with Vue, write a composable that fetches user profile data from an API endpoint and caches it for 5 minutes.
Prompt 5
Explain how to prefetch data with TanStack Query before navigating to a page so it loads instantly when the user arrives.
Open on GitHub → Explain another repo

← tanstack on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.