@tanstack/react-query

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