Can i use Tanstack for storing data, not dependent on async functions?

[skorphil]

Hi, can i use tanstack like React context to sync state across components?
For example:
Parent component, which set an initial state

...
QueryClient.setQueryData(['selectedInstitutionId'], 0);
...

Component, which updates state

...
onChange={(value) => {
        QueryClient.setQueryData(['selectedInstitutionId'], value);
...

Component, which renders GUI, based on state

...
const selectedInstitutionId = QueryClient.getQueryData(['selectedInstitutionId'])
return (<p>{selectedInstitutionId},<p>) // for now this component not reacting to changing of 'selectedInstitutionId', because AppQueryClient.getQueryData not triggering rerender. So it is shows only initial values
...

Can I somehow trigger component to rerender if specific query being changed using .setQueryData?
Or tanstack is not a tool I need for this case?

[skorphil]

Ah, seems like i figured this out. I can just useQuery without queryFn

// instead of const selectedInstitutionId = QueryClient.getQueryData(['selectedInstitutionId'])
const { data: selectedInstitutionId} = useQuery({ queryKey: ['selectedInstitutionId']})

this way component rerenders after value being changed with .setQueryData

[TkDodo]

This is not advised because your query will error unless another query has rendered with a queryFn somewhere in your component tree. That is a super hard to debug implicit dependency that you won't ever find again if you get the Missing queryFn error. It means your query will work in some situation, but not in others.

That's why the preferred abstractions is custom hooks to colocate key and fn.

[skorphil]

However, I found this topic #2852 where it is said that it is better to use other state management libraries i.e. zustand for storing global state.

Do I really need to? I am aiming to reduce the amount of libraries I'm using and hope that Tanstack will fetch for me and also store my client state

[TkDodo]

if you want a one-size-fits-all solution, just use redux-toolkit, which comes with rtk-query, and everything is stored together in one global redux store. The TanStackQuery philosophy is that it's tailor made for promise based state and everything else is not encouraged.

[skorphil]

This is not advised because your query will error unless another query has rendered with a queryFn somewhere in your component tree. That is a super hard to debug implicit dependency that you won't ever find again if you get the Missing queryFn error. It means your query will work in some situation, but not in others.

That's why the preferred abstractions is custom hooks to colocate key and fn.

What should this custom hook look like?