Polling and dependent queries

[vago]

The question is around having a polling master query and 1 or more dependent queries.

tldr; Whenever polling 'master' query returns some condition, the dependent query should refetch.

The polling master query returns a bunch of flags based on which different dependent queries should fetch data. I used the enabled property in each of the dependent queries that looks for the flag returned from polling query. And it works the first time as in code examples in the docs.
However, since it's polling, if the condition (enabled) becomes true later during 'a' poll, the dependent queries don't trigger refetch.
One way that seems to work is if I invalidate dependent query keys from onSuccess of polling query, the dependent queries are fired. However, I am not sure if this is a clean solution. Polling query shouldn't need to know who all are consuming it. I was hoping for the dependent query to have more control on refetch.

Can you please suggest if there's a better way? Thanks much.

[TkDodo]

Put all your dependencies that should trigger a refetch into the queryKey of the dependent query. react-query will automatically refetch if the queryKey changes. Alternatively, you can use the refetch method and fire it off in a useEffect.

[vago]

Thanks. Since the dependency is a static text, say updatedSummary or undefined, the first option won't work I guess. Once the query is cached with those keys, it won't react to polling updates. But second option will likely work. Thanks for the suggestion!

[TkDodo]

but if you put the static text as a dependency to the useEffect, it will also not work I guess?

[vago]

You are right. It doesn't work as I expected. I tried a hacky way of adding alternating text as useEffect dependency, e.g. "fetchData" when I receive 'updateSummary' from polling query and "stillFetchData" when I receive undefined. It works eventually, e.g. use case, when it's time to fetch data, polling query returns

0. undefined (initially)
1. updateSummary (on next poll)
2. updateSummary (on next poll)
3. updateSummary (on next poll)
4. undefined (when done)

The useEffect fires between 0 & 1 and 3 & 4. Ideally, I'd like fetch data between 0, 1, 2, 3, 4 to capture all states in the UI. Don't think I'll go with the hack.

I'll try to see if I can send a dynamic dependency from the backend which I can use as queryKey in the dependent query.