extended-salmon

useMutation invalidateQueries does not trigger either on onSuccess or onSettled

Please is there anything i might be doing wrong because after the successful mutation it doesnt refetch the data

  const { mutate, isPending } = useMutation({
    mutationFn: (value: { companyName: string }) => {
      return updateClient({ value, clientNo })
    },
    onSuccess: () => {
      toast.success('Cient has been successfuly Updated.')
      setEdit(false)
      queryClient.invalidateQueries({
        queryKey: ['client', clientNo]
      })
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['client', clientNo]
      })
    },
    onError: (error) => {
      const custom = error as CustomError
      toast.error(`${custom?.response?.data}`)
    }
  })

  const onSubmit = async (values: z.infer<typeof clientEditFormSchema>) => {
    mutate(values)
  }

  const { mutate, isPending } = useMutation({
    mutationFn: (value: { companyName: string }) => {
      return updateClient({ value, clientNo })
    },
    onSuccess: () => {
      toast.success('Cient has been successfuly Updated.')
      setEdit(false)
      queryClient.invalidateQueries({
        queryKey: ['client', clientNo]
      })
    },
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: ['client', clientNo]
      })
    },
    onError: (error) => {
      const custom = error as CustomError
      toast.error(`${custom?.response?.data}`)
    }
  })

  const onSubmit = async (values: z.infer<typeof clientEditFormSchema>) => {
    mutate(values)
  }

9 Replies

wise-white•2y ago

Where is clientNo coming from? Is it still available? What is your useQuery? Where is queryClient coming from?

extended-salmonOP•2y ago

The clientNo is very much available This is my useQuery below

export const useGetClient = (clientNo: string | undefined) => {
  return useQuery<TClient, Error>({
    queryKey: ['client', clientNo],
    queryFn: () => getClient(clientNo)
  })
}

export const useGetClient = (clientNo: string | undefined) => {
  return useQuery<TClient, Error>({
    queryKey: ['client', clientNo],
    queryFn: () => getClient(clientNo)
  })
}

I just imported the useQueryClient() and use it like below.

const queryClient = useQueryClient()

const queryClient = useQueryClient()

wise-white•2y ago

What if you invalidateQueries only for [„client“]

extended-salmonOP•2y ago

That ia exactly what i did

flat-fuchsia•2y ago

I don't think this discussion is leading anywhere. It's usually best if you'd provide a minimal codesandbox reproduction that shows your problem

extended-salmonOP•2y ago

@TkDodo 🔮 Thanks for your response I have prepared the codesandbox as requested , please take a look if theres any tip to assist me with the issue https://codesandbox.io/p/devbox/tanstack-usemutation-h5pvr2 @TkDodo 🔮

flat-fuchsia•2y ago

I've added a log statement in onSuccess and it's called. you said:

does not trigger either on onSuccess or onSettled

but it does, so, case closed ?

flat-fuchsia•2y ago

if you are wondering why the invaliation isn't triggered from the onSuccess callback, it's simple: your keys don't match. In the invalidate call, data?.clientNo is a number, while in the query, it's a string https://tkdodo.eu/blog/react-query-fa-qs#1-query-keys-are-not-matching

React Query FAQs

Answering the most frequently asked React Query questions

extended-salmonOP•2y ago

Thanks @TkDodo 🔮 i just figured out its the data type mismatch number | | string

Gaming

Programming

useMutation invalidateQueries does not trigger either on onSuccess or onSettled

Did you find this page helpful?