I am trying to create a framework where ‘widgets’ are bound to data held in a React Query cache but are loosely coupled.

In an ideal world, I would like to tell my widget, use a dataset with a key of ‘X’ but not need to tell it anything about how to get hold of that data.

Another component deals with knowing that data needs to be sourced at a particular URL and it should be called ‘X’ but knows nothing about who the consumer of that data might be.

I had hoped to do this by calling useQuery with a queryKey of ‘X’ and nothing else (no query function). The idea is that it would either:
Use data from the cache if any existed
or
Sit in a ‘pending’ state waiting for there to be data otherwise.

When the data componenet refreshed the data with key ‘X’ then any listeners would update (because of the useQuery) and if no queries were listening then it would just populate the cache for the time when one did start to listen.

Unfortunatley the query function is a required parameter.
I have sort of got it to work by passing undefined as the parameter value but I also seem to need to pass ‘enabled: false’ to prevent it from trying to use the function and the enabled false is (I think) getting in the way of my calls to invalidateQueries() which I am calling to update the cache.

I know I have a really strange use case so I may just be trying to do something totally silly in the React Query world!