TanStack Query

Powerful asynchronous state management for TS/JS, React, Vue, Solid, Svelte and Angular

What is TanStack Query?

TanStack Query (formerly React Query) is a powerful data synchronization library for web applications. It makes fetching, caching, synchronizing and updating server state in your applications a breeze.

Features

• 🚀 Declarative & Automatic - Fetch, cache and update data with zero configuration
• 🔄 Background Refetching - Automatically refetch stale data in the background
• 💾 Intelligent Caching - Powerful caching and deduplication out of the box
• 🔁 Real-time Updates - Keep your UI in sync with server state
• 🎯 TypeScript Support - Built with TypeScript for excellent developer experience
• 🎨 Framework Agnostic Core - Works with React, Vue, Svelte, Solid and more
• 🛠️ Devtools - Powerful debugging tools for React and Vue
• 📦 Small Bundle Size - Minimal overhead with tree-shaking support

Installation

React

npm install @tanstack/react-query
# or
pnpm add @tanstack/react-query
# or
yarn add @tanstack/react-query

Vue

npm install @tanstack/vue-query
# or
pnpm add @tanstack/vue-query
# or
yarn add @tanstack/vue-query

Svelte

npm install @tanstack/svelte-query
# or
pnpm add @tanstack/svelte-query
# or
yarn add @tanstack/svelte-query

Solid

npm install @tanstack/solid-query
# or
pnpm add @tanstack/solid-query
# or
yarn add @tanstack/solid-query

Quick Start

React Example

import { useQuery } from '@tanstack/react-query'

function App() {
  const { data, isLoading, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos
  })

  if (isLoading) return 'Loading...'
  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      {data.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </div>
  )
}

Vue Example

<script setup>
import { useQuery } from '@tanstack/vue-query'

const { data, isLoading, error } = useQuery({
  queryKey: ['todos'],
  queryFn: fetchTodos
})
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="error">An error has occurred: {{ error.message }}</div>
  <div v-else>
    <div v-for="todo in data" :key="todo.id">{{ todo.title }}</div>
  </div>
</template>

Documentation

Visit tanstack.com/query for docs, guides, API references and more.

• React Documentation
• Vue Documentation
• Svelte Documentation
• Solid Documentation

Examples

Check out the examples directory for framework-specific examples and use cases.

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT

Sponsors

This project is sponsored by TanStack. If you find TanStack Query useful, please consider sponsoring the project.