React Query queryClient.setQueryData isn't updating the cached data?

[tarajima]

I have a custom hook that looks something like this:

import { useQuery, useQueryClient } from 'react-query'
import { get } from '@/util/api' // Custom API utility
import produce from 'immer' // Using immer for deep object mutation

export function useData() {
  const queryClient = useQueryClient()
  const { data, isSuccess } = useQuery(
    'myData', () => get('data')
  )

  function addData(moreData) {
    const updatedData = produce(data.results, (draft) => {
      draft.push(moreData)
    })
    setData(updatedData)
  }

  function setData(newData) {
    queryClient.setQueryData('myData', newData)
  }

 return {
    data: data && data.results,
    setData,
    addData,
 }

}

My data in data.results is an array of objects. When I call addData it creates a copy of my current data, mutates it, then calls setData where queryClient.setQueryData is called with a new array of objects passed in as my second argument.

Expected Behaviour
Cached data updates with the newData passed into the second argument of queryClient.setQueryData and component hooked up to useData() hook re-renders with the updated data

Actual Behaviour
Cached data either doesn't update or becomes undefined in the component hooked up to the useData() hook

Does anyone know what I'm doing wrong?

[TkDodo]

can you show this behaviour in a codesandbox reproduction please?

[tarajima]

My issue was I was updating my data with the data.results object when I needed to pass in the whole data object. It works now :)