No way to do optimistic updates with multiple queries - next query based on optimistic previous one

[nicitaacom]

Describe the bug

Now it works only for single query like send message - like / unklike

but I want to implement functionality when user click on + button multiple times and product quantity should be increased optimistically multiple times as well

Your minimal, reproducible example

https://github.com/nicitaacom/acc2-react-query/blob/development/app/components/ToDoCard.tsx
codesandbox doesn't work (at least today or with last 'dev container' update)
stackblitz - has no way to edit in vs code

Steps to reproduce

here is how I do logic (nvm that query names todos but I change on_stock - its just example)

const {
    mutate: updateTask,
    isPending,
    context,
  } = useMutation({
    mutationFn: async () =>
      await supabase
        .from("products")
        .update({ on_stock: (on_stock += 1) })
        .eq("id", "123"),
    onMutate: async () => {
      await queryClient.cancelQueries({ queryKey: ["userToDos"] })
      const previousState: IProduct[] | undefined = queryClient.getQueryData(["userToDos"])
      if (previousState) {
        const updatedState = previousState
        updatedState[0].on_stock += 1
        console.log(31, "updatedState - ", updatedState)
        queryClient.setQueryData(["userToDos"], updatedState)
        return { updatedState }
      }
    },
    onSuccess: () => {
      toast({ title: "success", description: "task updated" })
      queryClient.invalidateQueries({ queryKey: ["userToDos"] })
    },
    onError: () => {
      queryClient.setQueryData(["userToDos"], () => context?.updatedState)
      toast({ title: "error", description: "error occured", variant: "destructive" })
    },
    onSettled: () => {
      toast({ title: "onSettled", description: "onSettled description" })

      queryClient.invalidateQueries({ queryKey: ["userToDos"] })
    },
  })

Expected behavior

decribed above

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

"@tanstack/react-query": "^5.0.0",
"@tanstack/react-query-devtools": "^5.0.0",
"next": "13.5.6-canary.6",

Tanstack Query adapter

react-query

TanStack Query version

above

TypeScript version

"typescript": "latest"

Additional context

When I open my dev tools - network - I see there are 2+ queries (depends on how much time I clicked the button) - but this queries the same - for example to increase by 1 from 23 to 24 and in optimistic UI I see already 25 but after ~8 seconds I see 24 because its 2 the same queries to increase quantity from 23 to 24 - so I want second query to be optimistic based on previous query - and if any previous query throws error - display UI with all successfull queries e.g from 23 to 25 - if from 25 to 26 throws error display 25 (not 23 or 24) - otherwise display 26 - also next query should have higher priority than previous one - I would say that I may cancel previous query and make new one based on optimistic UI changes (If it doesn't depend on the result from the previous one, like in blockchain, in my case it's just increasing count, so that's fine)
I know I described it complicated - in 2 words make next query based on result of previous optimistic query

Temp solution I found - create state

I created state to optimisticaly update this state and make next query based on optimistically updated previous one

  //create state to make next query based on optimistically updated previous one - https://github.com/TanStack/query/issues/6179
  const [onStock, setOnStock] = useState(on_stock)

  const {
    mutate: updateTask,
    isPending,
    context,
  } = useMutation({
    mutationFn: async () => await supabase.from("products").update({ on_stock: onStock }).eq("id", "123"),
    onMutate: async () => {
      await queryClient.cancelQueries({ queryKey: ["userToDos"] })
      const previousState: IProduct[] | undefined = queryClient.getQueryData(["userToDos"])
      if (previousState) {
        const updatedState = previousState
        updatedState[0].on_stock += 1

        console.log(31, "updatedState - ", updatedState)
        setOnStock(updatedState[0].on_stock)
        queryClient.setQueryData(["userToDos"], updatedState)
        return { updatedState }
      }
    },
    onSuccess: () => {
      toast({ title: "success", description: "task updated" })
      queryClient.invalidateQueries({ queryKey: ["userToDos"] })
    },
    onError: () => {
      queryClient.setQueryData(["userToDos"], () => context?.updatedState)
      toast({ title: "error", description: "error occured", variant: "destructive" })
    },
    onSettled: () => {
      toast({ title: "onSettled", description: "onSettled description" })
      queryClient.invalidateQueries({ queryKey: ["userToDos"] })
    },
  })

//return

          <CardDescription>{context?.updatedState[0].on_stock ?? on_stock}</CardDescription>

It looks a bit complicated - I know - you may suggest how to improve this

[TkDodo]

1. that repo seems to be private: https://github.com/nicitaacom/acc2-react-query

2. you're mutating state of the query in your optimistic updates; please do updates immutably: https://tanstack.com/query/v5/docs/react/guides/updates-from-mutation-responses#immutability

3. if you invalidate queries after every successful mutation, you'll likely see intermediate states. Only invalidate after the last mutation is successful by waiting for queryClient.isMutating({ mutationKey }) === 1

4. I hope your backend can handle concurrent mutations on the same entity. With increase it's certainly possible, but if you actually "set" a value from the frontend, updates need to be locked and queued on the backend or you'll get unpredictable results.

[CptJJ]

THANK YOU!

Was running into the following issue:

1. spam counter increment twice from 1 -> 3
2. onMutates fire quickly, cancels all pending queries
3. first counter revalidates data and UI flickers back to "2" (since onMutate for "3" already called this isnt stoped)
4. final mutation finishes and counter shows 3

Been reading through the docs looking for a way to handle this, checking of the queryClient.isMutating({ mutationKey }) === 1 is the perfect way to stop optimistic updates from a "counter" type objects from being rolled back due to invalidation queries from previous counts.

I bet the optimistic docs could benefit from a section on this talking about counter type optimistic updates/ mutations that cover the same query, say a user changes the title of a todo and the quickly marks it as completed and you dont want to lock the UI

[nicitaacom]

that repo seems to be private: https://github.com/nicitaacom/acc2-react-query

I opened it

if you invalidate queries after every successful mutation

Agree - its better to do it only onSetteld:() => {}

updates need to be locked

No - I don't want to lock value - as I mentioned it doesn't matter previous response from server was successfull for not - I do new request to DB based on last optimistic update (so if user will click from 1 to 10 and it fails on 7 (for example) - it doesn't matter because last update from 9 to 10 will successfull (if not it will be 9))

tbh - I not believe that my conversation with you comes to react-query update/improvement - so close this (also for me you speak like on another language - in some points I totally don't undestand you)
I just do the best as I can with react-query that we have today

[pavloko]

I have a similar question, but in my case multiple requests to modify the same query.

Here's the simplified example:

const useObject = useQuery({
  queryKey: 'objects', 
  queryFn: fetchObjects(),
});

const useCreateObject1 = useMutation({
  mutationFn: (payload) => createObject1(payload),
  onMutate: async (payload) => {
    await queryClient.cancelQueries({
      queryKey: 'object',
    });
    const previous = queryClient.getQueryData('objects');
    queryClient.setQueryData('objects', (old) => {
      return produce(old, (draft) => ({
        // manipulate the array
      }));
    });
    return { previous };
  },
});

const useCreateObject2 = useMutation({
  mutationFn: (payload) => createObject2(payload),
  onMutate: async (payload) => {
    await queryClient.cancelQueries({
      queryKey: 'object',
    });
    const previous = queryClient.getQueryData('objects');
    queryClient.setQueryData('objects', (old) => {
      return produce(old, (draft) => ({
        // manipulate the array
      }));
    });
    return { previous };
  },
});

and it's CRUD for each Object, e.g. during one phase multiple CREATE, UPDATE, and DELETE could happen triggering, e.g. 6 different queries that would modify the same queryKey: 'objects'.