TanStack•13mo ago•

9 replies

urgent-maroon

setQueryData inside mutation behavior

I copied following example from the course:

function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: updateUser,
    onSuccess: (newUser) => {
      queryClient.setQueryData(['user', newUser.id], newUser)
    }
  })
}

function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: updateUser,
    onSuccess: (newUser) => {
      queryClient.setQueryData(['user', newUser.id], newUser)
    }
  })
}

What happens if the

isPending

isPending

of this mutation is being used to show or hide specific components on a page. For example a component showing the user details in a form, using as initial values those provided by

useQuery

useQuery

matching the key of the mutation above.

queryClient.setQueryData

queryClient.setQueryData

is being called in the

onSuccess

onSuccess

which I think means that while calling

queryClient.setQueryData

queryClient.setQueryData

isPending

isPending

inside the component using the mutation is actually

false

false

, is that correct?

I think I saw an issue locally where my form (Mantine use-form) was using outdated initial values due to

queryClient.setQueryData

queryClient.setQueryData

still being 'in progress'. Is this something someone else also experienced, if so, how should I work around this?

I assume the data from

useQuery

useQuery

is updated in a later render cycle, pushing the new props to the form component but they are not taking into account as the form already rendered.

TanStack•13mo ago•

9 replies

urgent-maroon

setQueryData inside mutation behavior

I copied following example from the course:

function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: updateUser,
    onSuccess: (newUser) => {
      queryClient.setQueryData(['user', newUser.id], newUser)
    }
  })
}

function useUpdateUser() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: updateUser,
    onSuccess: (newUser) => {
      queryClient.setQueryData(['user', newUser.id], newUser)
    }
  })
}

What happens if the

isPending

isPending

of this mutation is being used to show or hide specific components on a page. For example a component showing the user details in a form, using as initial values those provided by

useQuery

useQuery

matching the key of the mutation above.

queryClient.setQueryData

queryClient.setQueryData

is being called in the

onSuccess

onSuccess

which I think means that while calling

queryClient.setQueryData

queryClient.setQueryData

isPending

isPending

inside the component using the mutation is actually

false

false

, is that correct?

I think I saw an issue locally where my form (Mantine use-form) was using outdated initial values due to

queryClient.setQueryData

queryClient.setQueryData

still being 'in progress'. Is this something someone else also experienced, if so, how should I work around this?

I assume the data from

useQuery

useQuery

is updated in a later render cycle, pushing the new props to the form component but they are not taking into account as the form already rendered.

setQueryData inside mutation behavior

Similar Threads

setQueryData inside mutation behavior

Similar Threads

Similar Threads

Similar Threads