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.

[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

[araskavakli]

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

Nice. Thanks!

[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.

[alexmccabe]

I too tried this and it basically creates a new useQuery with the query key, and overrides any useQuery options you've added, so staleTime gets reset to default

[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

[ViewableGravy]

useQuery does not accept a queryKey as the first parameter anymore, so you would want to modify this to work with react query v5 where the query key is part of the options object in the first parameter.

With this said, be careful with this, because if you ever clear the cache, you will not get a state update, since having a disabled query will only listen to cache changes, not to cache clears.

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

Note: it is generally recommended to create your query options once in a utility function and re-use this over whatever is going on above - the query will not refetch if you have cached

// Create a new one of these for each query in your app
export const createQueryOptions = (opts: MyOpts) => {
  return queryOptions({
    queryKey: ["myQuery", myOpts],
    queryFn: () => myApiRequest(MyOpts),
  });
}

// in another file
const { ... } = useQuery(createQueryOptions())
// or
const { ... } = useQuery({
  ...createQueryOptions(),
  ...otherOpts
})

[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);

[nadavge]

As far as I understand, this will set the value of ["queryName"] in the cache to null which I assume you don't want to do...

[venn24]

i use useMutationState

[dberardo-com]

how about

queryClient.getQueryCache().subscribe((queryCacheNotifyEvent) => {
let hash = queryCacheNotifyEvent.query?.queryHash as any;

... check the hash and do stuff
});

[alexmccabe]

This event fires every single time the cache is changed, and invalidating a query caused the callback to trigger six times, not just when data changes. You'd have to do deep comparison to make sure the data had changed, and that could be a performance issue

[alexmccabe]

For me this would be useful as I have some local state that needs to be updated with the partial result of a query, so I need to know when that has happened to update the partial state. I'm using vue-query, and I'm trying to avoid placing a watcher on the result and instead subscribe to it.

I had good results with the QueryObserver, however I don't like how I have to pass all the exact same options to it otherwise the initial query config gets overridden, and this is going to be difficult for the rest of the team to remember to do, which will eventually introduce bugs.

[ViewableGravy]

I have only used useQuery in react, but the general concept should be the same across frameworks.

The recommended approach to creating queries is as follows:

// create one of these on a per endpoint/async function basis typically
const createQueryAOptions = (opts: MyOpts) => {
  return queryOptions({
    queryKey: ["queryA", opts],
    queryFn: () => myAPI(opts),
    ...custom opts,
  }) 
}

// In your component
const { data } = useQuery(createQueryAOptions(opts));

In your case, since you want to derive some state, you would want a select function:

const { data } = useQuery({
  ...createQueryAOptions(opts),
  select: (data) => ...
});

This will not refetch using the queryFn after the first run, since the query is cached, and if you do an optimistic update on the query, your useQuery will re-run the select and re-render your component accordingly.

[alexmccabe]

Here's where I've ended up. Obviously this relies on Vue internals, but I've also added a select option, to do some data narrowing like useQuery allows. Could change the API to be a singular object instead, for consistency if desired

export function useQuerySubscriber<TQueryFnData = unknown, TError = Error, TData = TQueryFnData>(
  queryKey: QueryKey,
  callback: (
    state: QueryState<TData, TError> | undefined,
    previousState: QueryState<TData, TError> | undefined
  ) => void,
  options: { select?: (data: TQueryFnData | undefined) => TData | undefined } = {}
) {
  const state = ref<QueryState<TQueryFnData, TError> | undefined>();
  const client = useQueryClient();

  const unsubscribe = client.getQueryCache().subscribe(() => {
    const newValue = client.getQueryState<TQueryFnData, TError>(queryKey);

    if (options.select && newValue?.data) {
      return callback(
        { ...newValue, data: options.select(newValue.data) },
        state.value ? { ...state.value, data: options.select(state.value?.data) } : undefined
      );
    }

    callback(newValue as unknown as QueryState<TData, TError>, state.value as unknown as QueryState<TData, TError>);
  });

  onScopeDispose(() => unsubscribe());
}

Usage:

useQuerySubscriber<{ data: DuplicateContactsParams }, Error, DuplicateContactsParams>(
  getDuplicateContactsParamsQueryKey,
  (newState) => {
    if (!newState?.data) return;

    insightParams.value = {
      ...insightParams.value,
      activityStart: newState.data.activityStart,
      precision: newState.data.precision,
    };
  },
  { select: (state) => state?.data }
);