react-query

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 })