@tanstack/react-query

What is @tanstack/react-query?

The @tanstack/react-query package is a powerful tool for fetching, caching, and updating asynchronous data in React applications. It provides a set of hooks that enable developers to easily manage and synchronize server state with the UI, improving user experience and application performance.

What are @tanstack/react-query's main functionalities?

Data Fetching

This feature allows you to fetch data asynchronously using the useQuery hook. You can specify a unique key for the query and a function that returns a promise. The hook returns the status of the query (loading, error, success) and the fetched data.

const { data, error, isLoading } = useQuery('todos', fetchTodos)

Mutation

Mutations are used to create, update, or delete data. The useMutation hook returns a mutate function that you can call with the new data. You can specify side effects to run on success, error, or mutation completion, such as invalidating queries to refetch data.

const mutation = useMutation(newTodo => axios.post('/todos', newTodo), { onSuccess: () => queryClient.invalidateQueries('todos') })

Automatic Refetching

React Query can automatically refetch data under certain conditions, such as when the window regains focus. This ensures that the user always sees the most up-to-date information without having to manually refresh the data.

const { data } = useQuery('todos', fetchTodos, { refetchOnWindowFocus: true })

Other packages similar to @tanstack/react-query

swr

SWR is a React hooks library for data fetching, similar to @tanstack/react-query. It also provides features like caching, revalidation on focus, and more. SWR focuses on simplicity and ease of use, with a slightly different API design compared to React Query.

apollo-client

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It offers more extensive features for working with GraphQL APIs compared to @tanstack/react-query, which is more agnostic in terms of data fetching strategy.

react-fetch-hook

React Fetch Hook is a simpler alternative for data fetching in React. It provides a straightforward useFetch hook for making HTTP requests. While it offers ease of use for simple use cases, it lacks the advanced caching, synchronization, and mutation features of @tanstack/react-query.

README

Hooks for fetching, caching and updating asynchronous data in React

Enjoy this library? Try the entire TanStack! TanStack Table, TanStack Router, TanStack Virtual, React Charts, React Ranger

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

Quick Features

• Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!)
• Auto Caching + Refetching (stale-while-revalidate, Window Refocus, Polling/Realtime)
• Parallel + Dependent Queries
• Mutations + Reactive Query Refetching
• Multi-layer Cache + Automatic Garbage Collection
• Paginated + Cursor-based Queries
• Load-More + Infinite Scroll Queries w/ Scroll Recovery
• Request Cancellation
• React Suspense + Fetch-As-You-Render Query Prefetching
• Dedicated Devtools

Become a Sponsor!