From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Recap: Mutation and optimistic updates with TanStack Query

Recap: Mutation and optimistic updates with TanStack Query

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Recap: Mutation and optimistic updates with TanStack Query

“

Hello and welcome back. In this video, we will see the mutations using tansteq query. For the mutation, we have to use the useMutation hook and useQueryClient hook from tansteq query. And in the mutation function, we can provide the function which can add the data into the API. And on success, we can invalidate the queries so that the cache is invalidated and the data is going to be refreshed automatically. We can also have optimistic updates by using the different functions that useMutationHook provides. We can provide what is going to be the mutation function that is usually the API call. mutate, we can define what should be happened and we can optimistically handle that. So we can cancel all the queries whenever a mutation has happened. Using the queryClient.cancelQueries function and providing the query key, we can then fetch the latest data and we can filter the old data and remove the previous mutated data. Also on error or on settled event we can have the queries invalidated…

Contents