setQueryData set a new array doesn't refresh component

[Wxwind]

I want to set query cache after mutationFn manually, but it doesn't cause component to rerender. Here are a demo with detailed comments.

https://codesandbox.io/s/react-query-setquerydata-xmncm2?file=/src/hook.ts

It looks like the React Query will deep compare the cached data before and after update function in setQueryData(), which refer the same object (unlike the setState() behaves in usestate() hooks). So when I tried to change old data in setQueryData(), it shows no changes for React Query, therefore useQuery() won't rerender the component (e.g. comp A in demo), right?

[Birkbjo]

This is because of structuralSharing and because you are mutating the old value, it's reusing the same data for performance reasons. You shouldn't mutate your old data.

Your example would work if you did structuralSharing: false for your useQuery in useGetNums. Or even

    structuralSharing: (oldData, newData) =>
      oldData === newData ? oldData : newData,

But that's basically the same thing as structuralSharing: false.

More info about structural sharing

[Wxwind]

Thanks for explanation of structuralSharing. But why Component A can still be rerendered when updadeNums() called in it?

[rohit-sqboat]

@TkDodo how will this work when I am using setQueryData instead of useQuery? Basically, One my hooks is use setQueryData to set some data and a component is using getQueryData to use the data. when the component is already mounted then the getQueryData doesn't update when i switch page and revisit the page then the updated data is loaded from getQueryData.

[TkDodo]

getQueryData is an imperative getter method that does not subscribe you to changes. That’s why the useQuery hook exists. You need to use the hook to get a subscription so that the component re-renders correctly when updates come in.

[rohit-sqboat]

Thanks for the response.It worked.