KPC
Kevin Powell - Community•9mo ago
Nikita

useOptimistic - example needed - codesandbox / stackblitz / github

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>
  )
}
"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>
  )
}
Sonny Sangha
YouTube
Learn the useOptimistic Hook in 19 minutes (Next.js 13 For Beginners)
🚨 Join my course Zero to Full Stack Hero: https://www.papareact.com/course The useOptimistic hook provides a way to implement OPTIMISTIC updates. These Optimistic updates enhance the user experience by making the app appear more responsive to the user by displaying instant results on the front end. 🔴 LOOKING FOR THE CODE FROM THE BUILDS? 🛠️ ht...
1 Reply
Nikita
Nikita•9mo ago
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>
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 I think its react-query issue and I found temp solution for its - its create state (but in this case I may don't use react-query for this and make it like this guy - https://www.youtube.com/watch?v=MC6D4vylKTc&t=4893s If you want you may vote up or comment or react somehow - https://github.com/TanStack/query/issues/6179 
  //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>
  //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>
Want results from more Discord servers?
Add your server
More Posts
Header has a space, how to remove it.Hi guys, my header has a space its not filling in at the top. I dont have any margin-top or anythingButton Text Issue during animationWhen I hover over to the button, the animation is good but the button text is not visible, how to soFlexbox and bordersHello there I have a block of text and and an empty div with background color and want to layout thFramework vs Vanilla JSApologize for a noob question. I was wondering what’s the best way to tackle authentication, routingnav ul not taking whole height spaceyeah basically, i've been staring at the code for half an hour and couldn't find anything to fix, i transform chain positions - how is it organizing these?https://codepen.io/Laing91/pen/OJreYLK As you can see in the codepen, without transform they both s