Is it possible to subscribe query changes in a separate component?

[baymac]

Using queryCache.getQueryData(...) does not get updated when the query if fetched, it is only updated once the component renders for some other state change. It would be nice to be able to subscribe changes like a state.

[Jaypov]

I am wondering the same thing, this would be very powerful if its possible. However from reading the docs it seems that it is not.

I assumed subscribing to an observer with queryCache.subscribe would work but this function states

Out of scope mutations to the queryCache are not encouraged and will not fire subscription callbacks

if I am correct what is the reasoning for this?

[TkDodo]

I think you would just do useQuery again in that other component? Or am I missing something here?

[mcdougald]

I think you would just do useQuery again in that other component? Or am I missing something here?

Hi TkDodo, thanks for the library

My use case is similar to #3756. I have a list of 100 items, each needs to useQuery 1 - 7 times. All the Observers (and I guess timeouts?) are causing the page to lag.

So I've lifted the data/errors for each useQuery by creating a context for it.

But React's context isn't the greatest solution either right? So I've been looking at other options too. getQueryData, getQueryState, etc... but those aren't updating with results from the latest calls.

I believe I saw in a diff discussion Tanner saying react-query's context can be used for adv state management (like this)? But I can't find a clear setup/example. Do I need an observer in each item no matter what for isLoading, isFetched, etc?

[TkDodo]

We had the same question / discussion in discord lately (maybe it was even you 😅 ?) So I'll just re-post my answer here for posterity:

the problem with getQueryData is that it does not create a subscription. So if the query changes due to a background refetch, those components won't be informed about that change directly. Sure, if the parent re-renders, they will pick it up, but if the parent re-renders anyways, you can just as well stick the user data in context, which will at least inform all consumers.

of course, you loose the ability of fine-grained subscriptions via select (when using context), where you could subscribe to one property of a query result (e.g. email of a user) only, and only re-render if that email changes. It's a tradeoff.

[shakedlokits]

I only have a partial key in different component, i.e I fetched the bill with id=3 with ['bill', 3] but I want to know in a different component(not fetch) if all of the bills finished fetching like ['bill'].

[tholder]

I'm adding this here because we had a real problem with useQuery seemingly not working as indicated here. Changes were not being updated in sibling components as no reaction was occurring. Previously we had solved this by loading in to state higher up and prop-drilling it down through components. Obviously this is a pain. Turns out that setting notifyOnChangeProps property to 'all' fixes the issue for us and the following post was helpful https://tkdodo.eu/blog/react-query-render-optimizations - I don't fully understand the implication of this but for us it solves the issue.

[TkDodo]

I can take a look into the issue if you can show a reproduction where it fails please.

[baymac]

You can use useQueryCache hook. E.g. Inside your FC:

const queryCache = useQueryCache()
const item = queryCache.getQueryData([key, params])

Now your component will subscribe to the changes in queryCache and item will be updated.

[nilavrusty]

@TkDodo Could you let me know how may I subscribe to only a particular queryKey instead of subscribing to the complete queryCache

[TkDodo]

That is what useQuery is doing ...

[nilavrusty]

@TkDodo useQuery would need queryFn, i wanted something like subscribe(myqueryKey),

[TkDodo]

I'm not sure that's possible. Maybe by creating your own Observer ... I'm not sure what problem you are trying to solve with this though. You can achieve a similar behaviour by just calling useQuery, best abstracted in a custom hook, and if you don't want background refetches, you can customize staleTime.

[netrolite]

you actually can set the enabled option to false and then the queryFn would no longer be required

[sergiodxa]

You can use queryCache.subscribe, but the easiest and probably safer way is to call useQuery again, it will not trigger a new render and you will know when something change.

[retyui]

queryClient.getQueryCache().subscribe((queryCacheNotifyEvent) => {
  if (!queryCacheNotifyEvent) {
    return;
  }

  console.log(queryCacheNotifyEvent);
});

[saeedghasemi72]

I think QueryObserver can help you

const observer = new QueryObserver(queryClient, { queryKey: ['posts'] })

const unsubscribe = observer.subscribe(result => {
console.log(result)
unsubscribe()
})

[pencilcheck]

observer seems to mess up other useQuery instance on other components... not working.

[itsramiel]

Pass the key but not the function like this:

const { data } = useQuery<T>([key]);

[Jaggler3]

It gives WARN Missing queryFn

[ovidijusr]

Same to me, any ideas why? Also that query that was loading just fails to load

[netrolite]

I wrote a hook for this:

import { useQuery } from "@tanstack/react-query";

export default function useObserveQuery<TData>(queryKey: string[]) {
  return useQuery<TData>(queryKey, { enabled: false });
}

Basically you just have to set the enabled option to false to fix the error saying that the queryFn is required

[pashkes]

@netrolite is not work for current version react query

[danvc]

I was facing the same problem, here's what I did and it's working fine, as expected:

To listen to the query:

  const { data: dateRange } = useQuery({
    enabled: true,
    queryKey: ["queryName"],
    queryFn: () => null,
  });
  console.log("dateRange", dateRange);