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

Note

You're looking at the v3 version of react-query. Starting with v4, react-query is now available as @tanstack/react-query

Find the docs at https://tanstack.com/query/latest