useOptimistic - example needed - codesandbox / stackblitz / github

[raven wigeon]

I need to change data immediately without waiting for response from server - https://www.youtube.com/watch?v=wg3xQogkZDA&ab_channel=SonnySangha

If you did this with useOptimistic or react-query - please send me like to example

Also I tried to do it and got this error
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.experimental_useOptimistic) is not a function or its return value is not iterable

To reproduce:

1. pnpm create-next-app@latest
2. paste this in page.tsx

"use client"

import { experimental_useOptimistic as useOptimistic } from "react"

export default function Home() {
  let testNumber = 99
  const [optimisticTest, optimisticTestFunction] = useOptimistic(
    testNumber,
    (state, amount: number) => state + Number(amount),
  )
  async function updateNumber(amount: number) {
    optimisticTestFunction(amount)
  }
  return (
    <div>
      {optimisticTest}
      <button onClick={() => updateNumber(-1)}>optimistic test</button>
      <button onClick={() => updateNumber(+1)}>optimistic test</button>
    </div>
  )
}

[raven wigeon]

now I come up with this logic

const queryClient = useQueryClient()
  const supabase = createClientComponentClient<Database>()

  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" })
    },
    onError: () => {
      queryClient.setQueryData(["userToDos"], () => context?.updatedState)
      toast({ title: "error", description: "error occured", variant: "destructive" })
    },
    onSettled: () => {
      toast({ title: "onSettled", description: "onSettled description" })
    },
  })
//return
          <CardDescription>{context?.updatedState[0].on_stock ?? on_stock}</CardDescription>

But it works for like / unlike

If I press button to update on_stock muiltiple times it change UI from 3 to 10 (for example) but when first query will success it change UI back from 3 to 4

If somebody know how to fix it - let me know - any updates with react-query how to do it would be nice