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.

TanStack•3y ago•

1 reply

worthy-azure

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

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.

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads