How do I listen for when a Query is being released after the staleTime has elapsed?

[Mike-Sinistralis]

Is there a way to capture when a query is cleaned up due to the query being out of scope for a long period of time?

I ask because I am wrapping a real-time connection with query for GETs and I have the query updated with the connection and honestly it works wonderfully. This pattern also works nicely for local data, should you want to do that.

Anyway, I want to be able to pass in a 'OnCleanup' or similar function to the Options you can pass into a query function. I want to do this so that the queryFunction basically becomes a 'Keep this socket alive' observer, and when the query has been busted from the cache, it will be capable of cleaning up that connection.

Does anyone know if you can currently do this? And if not, how difficult would this be to do?

[TkDodo]

Is there a way to capture when a query is cleaned up due to the query being out of scope for a long period of time?

i don’t think there is. The callbacks work on a per-observer level, and inactive queries have no observer per definition. So when the query is garbage collected, there is no callback on useQuery to call, because there is no mounted useQuery instance.

I want to be able to pass in a 'OnCleanup' or similar function to the Options you can pass into a query function.

Such a callback would need to be on the cache itself (see above reasoning)

I ask because I am wrapping a real-time connection with query for GETs and I have the query updated with the connection and honestly it works wonderfully.

how are you doing that please? do you not need to spawn up a useEffect? If so, tying this to the component lifecycle with the effect cleanup function seems like the way to go.

[Mike-Sinistralis]

I have a hook that wraps react query, and currently it only unsubscribes the websocket when react-query attempts to open a new one, I am still determining when to unsubscribe.

• If I do it on unmount, then these queries can't be cached because being cached means they won't open a new connection anymore.
• Also, if I put the connection in a useEffect hook outside of the query, if I use a query in multiple places then that spawns excess connections. I want the connection tied to the query key specifically.
• If I subscribe when react-query deems it as stale, then I am closing/opening a lot of connections for no reason.
• If I cache the data for too long, then I am going to end up having connections to everything as a user navigates the site, bit inefficient.

Another option is to remove the websocket from react-query logic entirely and simply have a query point be a local state that is updated in response to pushed messages via queryClient.setQueryData. But then I have to have a seperate set of things to manage the websocket connections.

I was hoping to kill both in one fell swoop. Like, having react-query be what determines when my connections are active, but still keep that data cached in the meantime.

As for what I'm doing, I'm using firebase. Check below (I just finished writing this code, its likely a mess and has bugs still)

import { useRef } from 'react';
import { useQuery } from 'react-query';

import { queryClient } from '~Const/queryClient';
import { db } from '~Hooks/Firebase/config';

export const subscribe = async ({ dbSelector, queryParams, onSnapshot }) => {
  const itemRef = dbSelector(db, queryParams);

  const unsubscribe = itemRef.onSnapshot(onSnapshot);
  // console.log(`Created snapshot for ${JSON.stringify(queryParams)}`);

  const doc = await itemRef.get();

  return {
    unsubscribe,
    doc,
  };
};

const useFirebaseQuery = (
  queryKey,
  dbSelector,
  queryOptions = {},
) => {
  const subscription = useRef();

  return useQuery(queryKey, async ({ queryKey: queryParams }) => {
    if (subscription.current) {
      // console.log(`Unsubscribed ${JSON.stringify(queryParams)}`);
      subscription.current();
    }

    const { unsubscribe, doc } = await subscribe({
      dbSelector,
      queryParams,
      onSnapshot: (snapshot) => {
        // console.log(`Recieved snapshot for ${JSON.stringify(queryKey)}`, snapshot.exists ? snapshot.data() : snapshot);
        queryClient.setQueryData(queryKey, snapshot);
      },
    });

    subscription.current = unsubscribe;

    return doc;
  }, queryOptions);
};

export default useFirebaseQuery;

const dbTasksSelector = (db, [key, params]) => {
  const { userId } = params;

  return db
    .collection('users')
    .doc(userId)
    .collection(key);
};

export const useTasks = () => {
  const { userId } = useAuth();

  const { data, ...result } = useFirebaseQuery(['tasks', {
    userId,
  }], dbTasksSelector);

  const { ids } = mapIds({ queryData: data });

  return {
    ...result,
    ids,
  };
};

[TkDodo]

so judging from the above code, you would unsubscribe / re-subscribe whenever the queryFn is executed. That seems a bit inefficient, because this would e.g. happen on every background refetch, like windowFocus.

have you seen this article about react-query and firebase: https://aggelosarvanitakis.medium.com/a-real-time-hook-with-firebase-react-query-f7eb537d5145

[Mike-Sinistralis]

Yes, I used that code as a baseline for this but that code had a number of problems. Mainly, what if I have that hook mounted more than 1 time? I now have duplicate active connections.

What I want to do is have the connection be dependent on the queryKey. That's the key thing here. I want to be able to use my hook in 5 places but not have the connection open across 5 seperate instances. Which means I need to tie the connection to the queryKey. You guys are already hashing this, so I would prefer to make the connection inside the queryFn (and also be able to clean it up when the queryFn is invalidated)

Once I have that done, then I can just have this be cached for say, 10 minutes. That way, users can use the app but not end up connected to the entire database over a period of time. But I can re-use this in multiple places without duplicating connections.

[TkDodo]

What I want to do is have the connection be dependent on the queryKey. That's the key thing here. I want to be able to use my hook in 5 places but not have the connection open across 5 seperate instances.

yeah, this seems like a not so straight-forward thing to do. I still do think that useEffect is the better thing to use than the queryFn, because as I said - that one is expected to run often. I think you'd maybe need to keep track of the amount of subscribers that a query has, and only cleanup when the subscriber count hits 0. Basically, you'd want to know when a query transitions to the inactive state.

I think the best way to achieve this is how the devools are doing it: by subscribing to the queryCache directly, which will give you the amount of observers:

https://github.com/tannerlinsley/react-query/blob/ac342e237ae9fab6759f2d7be616662da6c16225/src/devtools/utils.ts#L29

if that count hits 0, your query is inactive

[Mike-Sinistralis]

Oh, you can subscribe to the cache? That might be exactly what I'm looking for. Lemme play with this and I'll get back to you but this sounds like a solution.

[Mike-Sinistralis]

@TkDodo So, this was exactly what I needed. What I ended up with is actually quite a bit simpler too:

The subscription implementation (The intent here is to have this workflow be completely hidden and not relevant)

import { useMemo } from 'react';
import { useQuery } from 'react-query';

import { queryClient } from '~Const/queryClient';
import { db } from '~Hooks/Firebase/config';

const connections = {};
window.connections = connections;

export const subscribe = ({ dbSelector, queryParams }) => {
  // Get rid of the firebase identifier, only the underlying implementation should care about this.
  const params = [...queryParams];
  params.shift();

  const itemRef = dbSelector(db, params);

  return itemRef.onSnapshot((snapshot) => {
    // console.log(`Recieved snapshot for ${JSON.stringify(queryKey)}`, snapshot.exists ? snapshot.data() : snapshot);
    queryClient.setQueryData(queryParams, snapshot);
  });
};

queryClient.getQueryCache().subscribe(({ query, type }) => {
  if (query.queryKey[0] === '__FIREBASE__') {
    const { queryHash, options, queryKey } = query;
    const { dbSelector } = options;

    if (type === 'queryAdded') {
      connections[queryHash] = subscribe({
        dbSelector,
        queryParams: queryKey,
      });

      console.log(`Subscribed to ${JSON.stringify(queryKey)}`);
    }

    if (type === 'queryRemoved') {
      connections[queryHash]();
      delete connections[queryHash];

      console.log(`Unsubscribed ${JSON.stringify(queryKey)}`);
    }
  }
});

const useFirebaseQuery = (
  queryKey,
  dbSelector,
  queryOptions = {},
) => {
  const key = useMemo(() => ['__FIREBASE__', ...queryKey], [queryKey]);
  // We want to inject the dbSelector into options so we can pass it to the cache observer (located above)
  /* eslint-disable-next-line no-param-reassign */
  queryOptions.dbSelector = dbSelector;

  return useQuery(key, () => new Promise(() => {}), queryOptions);
};

export default useFirebaseQuery;

And the actual hooks

import { useMemo } from 'react';

import useFirebaseQuery from '~Hooks/useFirebaseQuery';
import { useAuth } from '~Hooks/Firebase/useAuth';
import { flattenCollection } from '~Hooks/utils';
import { DEFAULT_QUERY_PARAMS } from '~Const/queryClient';

export const flattenCollection = ({
  collection,
}) => {
  const ids = [];
  const data = {};

  if (collection) {
    collection.docs.forEach((doc) => {
      ids.push(doc.id);
      data[doc.id] = doc.data();
    });
  }

  return {
    ids,
    data,
  };
};

export const useTasks = () => {
  const { userId } = useAuth();

  const result = useFirebaseQuery(['tasks', {
    userId,
  }], dbTasksSelector, {
    ...DEFAULT_QUERY_PARAMS,
  });

  const { ids, data } = useMemo(
    () => flattenCollection({ collection: result.data }),
    [
      result.data,
    ],
  );

  return {
    ...result,
    ids,
    byId: (id) => data[id],
  };
};

Note that I am a complete newbie to firebase, but I wanted to put this code here incase it helps someone in the future.