complex-teal

How to detect mutation success event?

I have 2 components

// first.tsx
const { create } = usePost();
const handleCreate = (payload) => {
  create.mutate(payload, {
    onSuccess: () => {
      console.log("created succssfully")
    }
  })
}

// first.tsx
const { create } = usePost();
const handleCreate = (payload) => {
  create.mutate(payload, {
    onSuccess: () => {
      console.log("created succssfully")
    }
  })
}

//second.tsx
how to I can detect over mutation success event in here?

//second.tsx
how to I can detect over mutation success event in here?

this is possible with tankstack query?

12 Replies

ambitious-aqua•3y ago

With useMutationState

complex-tealOP•3y ago

thanks for your quickly reply Could you know me in detail with code?

complex-tealOP•3y ago

complex-tealOP•3y ago

where I can find useMustationState hook?

ambitious-aqua•3y ago

search still doesn't work for v5, we're on it https://tanstack.com/query/v5/docs/react/reference/useMutationState

useMutationState | TanStack Query Docs

useMutationState is a hook that gives you access to all mutations in the MutationCache. You can pass filters to it to narrow down your mutations, and select to transform the mutation state. Example 1: Get all variables of all running mutations

complex-tealOP•3y ago

Thanks

useMutationState({
    filters: { mutationKey: [QueryKey.PRODUCTION_LINE] },
    select: (mutation) => {
      // setActiveLine(mutation.state.variables as ProductionLine)
      console.log(mutation.state.data)
      console.count();
    }
  })

useMutationState({
    filters: { mutationKey: [QueryKey.PRODUCTION_LINE] },
    select: (mutation) => {
      // setActiveLine(mutation.state.variables as ProductionLine)
      console.log(mutation.state.data)
      console.count();
    }
  })

console.count() is more than 20 why this call many times?

ambitious-aqua•3y ago

because it runs on every upate of the mutation and every rerender of the component

complex-tealOP•3y ago

ok Thanks

const { data } = useProductionLine();

useEffect(() => {
  if (data) {
    // some logic
  }
}, [data])

const { data } = useProductionLine();

useEffect(() => {
  if (data) {
    // some logic
  }
}, [data])

this is right to use useEffect? I am getting bit terrible with this code

ambitious-aqua•3y ago

depens on what you're trying to do in there?

complex-tealOP•3y ago

what means?

complex-tealOP•3y ago

my means I refer https://react.dev/learn/you-might-not-need-an-effect about useEffect so I am getting confuse with my over code

You Might Not Need an Effect – React

The library for web and native user interfaces

complex-tealOP•3y ago

If I many components need useProductionLine(), I have to use over code with same many make sense my point?

Gaming

Programming

How to detect mutation success event?

Did you find this page helpful?