react-query

What is react-query?

The react-query npm package is a powerful tool for fetching, caching, and updating asynchronous data in React applications. It provides hooks that enable efficient data synchronization with your server's state without the need to manage complex state logic within your components.

What are react-query's main functionalities?

Data Fetching

Use the useQuery hook to fetch data from an API and provide the status of the request. It automatically caches the data and provides a re-fetch mechanism.

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

Data Mutation

Use the useMutation hook to create or update data. It integrates with the query cache to automatically update related queries on success.

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

Automatic Refetching

Configure queries to refetch automatically under certain conditions, such as when the window regains focus, to keep data fresh.

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

Pagination and Infinite Queries

Handle paginated or infinite data sets with useInfiniteQuery, which provides functions to fetch additional pages of data.

const { data, fetchNextPage } = useInfiniteQuery('projects', fetchProjects, { getNextPageParam: lastPage => lastPage.nextCursor })

Query Caching and Sharing

Cache query results to optimize performance and reduce the number of requests. Shared queries with the same key will use cached data when possible.

const { data } = useQuery('todos', fetchTodos, { cacheTime: 1000 * 60 * 60 })

Other packages similar to react-query

swr

SWR is a React hooks library for data fetching, similar to react-query. It also provides features like caching, revalidation on focus, and pagination. SWR focuses on simplicity and has a smaller API surface 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 is more tightly coupled with GraphQL than react-query and offers features like caching, optimistic UI updates, and subscription support.

redux-query

redux-query is a library for querying and managing network state in Redux applications. It integrates with Redux and provides a way to co-locate queries with reducers. It is more Redux-centric compared to react-query and requires more boilerplate.

README

Hooks for fetching, caching and updating asynchronous data in React

Enjoy this library? Try the entire TanStack! React Table, React Form, React Charts

Visit react-query.tanstack.com 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 (React Query Devtools)
• (depending on features imported)

Become a Sponsor!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Tanner Linsley 💻 🤔 💡 🚧 👀	Andrew Cherniavskii 💻 🐛	Thibaut Tiberghien 📖	Rohit Garg 🔧	Avinash 💻 🐛	Jason O'Neill 🚧 ⚠️	Jack Zhao 💻 🐛
dpyzo0o 💻	Jelte Liekens 💻	Jen Gettings 💻	Justin 💻	Marcelo Alves 💻	Zorza 📖

This project follows the all-contributors specification. Contributions of any kind welcome!