T
TanStack•2y ago
multiple-amethyst

Invalidation triggers re-fetch but not re-render of content

I have a mutation, where in it's onSuccess callback I do a query invalidation. When the invalidation is done the following happens: 1. The query is invalidated 2. A refetch is triggered 3. No re-render is done (i.e. the data is not updated in the view) I have implemented a button in my UI where I can explicitly trigger an invalidation, and that works fine (including the UI re-render). Mutation: 
export const usePausePlaying = ({ onSuccess, onError }: MutationInput<string>) => {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: async (data: {
      trackID: string
      playerID: number
      songVersion: number
    }) => {
      pausePlayingSong(data.trackID, data.playerID, data.songVersion)
      return data.trackID
    },
    onSuccess: (trackID: string) => {
      console.log('invalidate', songKeys.get(trackID))
      queryClient.invalidateQueries({
        queryKey: songKeys.get(trackID),
      })
    },
  })
}
export const usePausePlaying = ({ onSuccess, onError }: MutationInput<string>) => {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: async (data: {
      trackID: string
      playerID: number
      songVersion: number
    }) => {
      pausePlayingSong(data.trackID, data.playerID, data.songVersion)
      return data.trackID
    },
    onSuccess: (trackID: string) => {
      console.log('invalidate', songKeys.get(trackID))
      queryClient.invalidateQueries({
        queryKey: songKeys.get(trackID),
      })
    },
  })
}
and the button where I can manually trigger it: 
<Button
  onClick={() =>
    queryClient.invalidateQueries({ queryKey: songKeys.get(trackID) })
  }
>
  Refetch
</Button>
<Button
  onClick={() =>
    queryClient.invalidateQueries({ queryKey: songKeys.get(trackID) })
  }
>
  Refetch
</Button>
What can this be caused by? I see the data being refetched as it should.
1 Reply
multiple-amethyst
multiple-amethystOP•2y ago
Solved. Turns out it's a race condition where the data is refetched before the update is done, as I was not awaiting the pausePlayingSong

Did you find this page helpful?