setQueryData fails silently during an optimistic mutation

[danielreuter]

I'm using useMutation to optimistically update an upvote/downvote component that renders data from a useInfiniteQuery--the client needs to see the buttons change in the browser instantaneously.

But setQueryData fails to alter the cache. Below is code taken straight from the docs for an optimistic update, where I've simply added the use of immer (though it fails when using map as well) and typed the cache data appropriately. It produces no change in the cache:

  const { mutate } = useMutation({
    mutationFn: mutateFn,
    onMutate: async (updateData) => {

      // Cancel any outgoing refetches
      await queryClient.cancelQueries({ queryKey: queryKey })

      // Snapshot the previous value
      let previousData: InfiniteData<Array<PostWithVote>> | undefined = queryClient.getQueryData(queryKey)
      if (!previousData) return

      // Optimistically update to the new value
      let newPages: InfiniteData<Array<PostWithVote>> | undefined = produce(previousData, draft => {
        draft.pages.forEach((page) => {
          page.forEach((oldPost) => {
            if (oldPost.id === updateData.postId) {
              oldPost.vote = updateData.vote
              oldPost.voteScore = oldPost.voteScore + updateData.increment
            }
          })
        })
      })
      const newData = {
        pages: newPages,
        pageParams: previousData.pageParams,
      }
      queryClient.setQueryData([queryKey], newData)  
      
      return { previousData }
    }
  })

The only way I've gotten this to work is to mutate the cache directly (I don't want to push this to production obviously):

const { mutate } = useMutation({
    mutationFn: mutateFn,
    onMutate: async (updateData) => {

      // Cancel any outgoing refetches
      await queryClient.cancelQueries({ queryKey: queryKey })

      // Snapshot the previous value
      let previousData: InfiniteData<Array<PostWithVote>> | undefined = queryClient.getQueryData(queryKey)
      if (!previousData) return

      // Optimistically update to the new value -- this works by directly mutating the data in the cache
      previousData.pages.forEach((page) => {
        return page.forEach((oldPost) => {
          if (oldPost.id === updateData.postId) {
            oldPost.vote = updateData.vote
            oldPost.voteScore = oldPost.voteScore + updateData.increment
          }
        })
      })
      
      return { previousData }
    },
  })

If I were to guess what the problem is, I'd say that there is some detail in the implementation of setQueryData that makes it fail if its argument doesn't have the right type, and that I've somehow typed the input data incorrectly -- but that seems falsified by the fact that the direct mutation works.

Any ideas? Very much appreciated--thank you.

[TkDodo]

wouldn't know why this shouldn't work. can you reproduce this in a sandbox please?

[danielreuter]

@TkDodo the problem was that I imported the QueryClientProvider from @tanstack/react-query and then the useMutation from react-query -- not sure if there's a way to prevent people in the future from doing this... Thanks anyway.