Handling optimistic update rollback when multiple mutations have been ran

  const addIngredientToKitchenMutation = createMutation(() => ({
    mutationFn: KitchenService.addIngredient,
    onMutate: async (data) => {
      const previousIngredients = queryClient.getQueryData(['kitchen-ingredients']);
      await queryClient.cancelQueries({ queryKey: ['kitchen-ingredients'] })
      queryClient.setQueryData(['kitchen-ingredients'], (old: KitchenIngredient[] | undefined) => {
        if (old === undefined) {
          return [{...data.ingredient, inStock: true}];
        } else {
          return [...old, {...data.ingredient, inStock: true}];
        }
      });
      
      return { previousIngredients }
    },
    onSuccess: () => {
      toast.success(`Added ingredient to your kitchen`);
    },
    onError: (error: any, _data, context) => {
      toast.error(`Error adding ingredient to your kitchen ${error.message}`);
      
      queryClient.setQueryData(['kitchen-ingredients'], context?.previousIngredients)
    },
    onSettled: () => {
      queryClient.invalidateQueries({queryKey: ['kitchen-ingredients']});
    },
  }));