React Query and optimistic updates

Looking to get into development? As a full-stack developer I guide you on this journey and give you bite sized tips every single day 👊

React Query optimistic updates

Alright let's start with the mutation we had in the previous article:

const {mutate: addNewPokemon} = useMutation( (newPokemon) => { // return axios.post('API', newPokemon); return {name: newPokemon}; }, { onSuccess: async (newPokemon) => { queryClient.setQueryData('pokemon', (old) => [...old, newPokemon]); }, } );

Instead of this onSuccess callback, we can leverage the onMutate option.

This option gets fired right away and doesn't care about the state of the actual mutation.

onMutate: async (newPokemon) => { await queryClient.cancelQueries('pokemon'); const previousPokemon = queryClient.getQueryData('pokemon'); queryClient.setQueryData('pokemon', [ ...previousPokemon, { name: newPokemon }, ]); return { previousPokemon, newPokemon }; },

Let's see what's going on here. We first cancel the existing query so React Query won't start updating it in between us trying to set it manually.

Then we get the current data object for this query. And manipulate it, as we did before.

Then we return the previous data. This return context can be accessed in the onError function.

Speaking off the error function, this function gets triggered if the mutation fails. It will get the context from the onMutate return object.

What we want to do is reset the previous state.

onError: (err, newPokemon, context) => { queryClient.setQueryData('pokemon', context.previousPokemon); },

Let's complete the function by introducing a failing request. What should happen when we run this function:

mutation gets triggers

onMutate temporary adds the new Pokemon to the list

mutation returns a failed request

onError gets called, and we reset the state

everything is back to before

const {mutate: addNewPokemon} = useMutation( async (newPokemon) => { const request = await fetch('https://pokeapi.co/api/v2/pokemon', { method: 'POST', data: {pokemon: newPokemon}, }); const {results} = await request.json(); return results; }, { onMutate: async (newPokemon) => { await queryClient.cancelQueries('pokemon'); const previousPokemon = queryClient.getQueryData('pokemon'); queryClient.setQueryData('pokemon', [...previousPokemon, {name: newPokemon}]); return {previousPokemon, newPokemon}; }, onError: (err, newPokemon, context) => { queryClient.setQueryData('pokemon', context.previousPokemon); }, } );

I've also created this Code Sandbox environment so you can try it out directly.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

React Query and optimistic updates

Comments

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

React Query optimistic updates

Thank you for reading, and let's connect!

Command Palette

Comments

More from this blog

React Query optimistic updates

Thank you for reading, and let's connect!