Isn't getQueryData/getQueryState reactive?

[chandru89new]

I've been using getQueryData/getQueryState to fetch cache in a Nextjs project and they pretty much work like reactive elements. So when cache is updated, the components using getQueryData/State update with the latest.

However, I tried to replicate the same thing with a simple one-page codebase for a demo but it doesnt work.

Here's the code: https://codesandbox.io/s/gracious-lake-l0ddr

I am trying to load todos and "view" at almost the beginning of the app through component and then trying to fetch the cached data of todos and view through getQueryData. But this doesnt work at all - even though ReactQuery Dev Tools indicates that the local cache of todos and view is updated.

I wonder what I'm doing wrong here and why in the Nextjs project, getQueryData seems to work like a reactive thing.

[TkDodo]

Isn't getQueryData/getQueryState reactive?

no, they don't create a subscription or re-render your component, they will just give you the data "once". If you want a subscription - that is what useQuery is for.

[chandru89new]

Thanks for the explanation, Dominik.

[0xyy]

@TkDodo so I am curious what is getQueryData good for, any use case ? If it's just returning not subscribed data which doesn't trigger rerender whenever new data comes or the data cache changes ?

[TkDodo]

it’s not meant to be used during rendering, as it’s not reactive, but it can be used in imperative methods and callbacks, e.g. for optimistic updates: https://tanstack.com/query/v5/docs/framework/react/guides/optimistic-updates#via-the-cache

[0xyy]

@TkDodo this explains a lot thanks! another question, can I use useSuspenseQuery in many components like useQuery showed ? I have one main place with the useSuspenseQuery where i get the data but i want to avoid props drilling so is useSuspenseQuery in other place is ok to use ? so I will grab the data from cache that already exist not making unneecesary requests ?

[TkDodo]

Yes, there's no difference in this regard to useQuery.