Dispose of a resource held by a cached query

[danielbrauer]

Is there any way to have an action performed when a query result is overwritten or removed from the cache? I would like to have my query return URLs created with URL.createObjectURL()but currently can't see how I would issue the corresponding URL.revokeObjectURL() to avoid leaking resources.

[TkDodo]

That's an interesting question. As far as I am aware, there is no dedicated callback that will be invoked when a query is evicted from the cache, but you can globally subscribe to the query cache and act on the specific removal there

[danielbrauer]

Thanks for the idea. The docs on query cache subscription are a bit lean, so I wasn't sure if the events would be appropriate. I'll try it out, though!

Do you know if QueryObserver might be better for this thing once it's expose? 5d05464

[TkDodo]

It looks like queryCache.watchQuery was just released a couple of days ago in v2.23.0. There are no docs for it yet, so you'd have to try what that does :)

[edzis]

@danielbrauer How did you end up solving this? I have the same need.

[TkDodo]

Isn't the problem also that if the queryFn is invoked because of a background refetch, you would create a new resource that overrides the old one without releasing it? So this doesn't necessarily have something to do with cache garbage collection, unless you combine it with infinite staleTime...

[edzis]

I ended up using this - https://gist.github.com/edzis/e97d83ee4eb7bf016f5dff165244ebd5

const queryClient = new QueryClient();
queryClient.getQueryCache().subscribe((event) => {
  if (!event) {
    return;
  }
  if (event.type === 'queryRemoved') {
    maybeRevokeBlobImageUrl(event.query);
  }
});

export const maybeRevokeBlobImageUrl = (query: Query) => {
  if (
    typeof query.state.data !== 'string' ||
    query.queryKey[0] !== QUERY_KEY_BASE
  ) {
    return;
  }

  const url = query.state.data;
  if (DEBUG) {
    console.log('BlobImage revokeObjectURL', url);
  }
  URL.revokeObjectURL(url);
};

[TkDodo]

this wouldn't work in the following case:

const { data, refetch } = useQuery('key', () => {
  return URL.createObjectURL(...)
})

<button onClick={() => refetch()}>refetch</button>

Every time you refetch a query, the queryFn is executed. Even focussing the window is enough to trigger a background refetch, which executes the queryFn. At no time in between will you get a queryRemoved event, because the query is not removed.

[edzis]

But would there be any danger in my case where I keep the query inside the component without a way to refetch it and make it infinitely stale?

[TkDodo]

if you ensure that the queryFn never runs again then yes, there is no problem. I would still generally try to keep these things outside of react-query, e.g. by coupling the creation to the component lifecycle with useEffect because you will have great cleanup options.

[edzis]

I recognize this is tangling the systems and your suggestion would be better for simple scenarios.
But I chose to use react-query to better support my usecase - the same url must be shown in different image instances over time. Creating and deleting blob urls locally in the component would result in duplicates and/or caching the full image data in react-query. And that nudges to reinvent react-query on the side for tracking the number of active uses of a blob url to know when an url can be released.

[TkDodo]

The only way I could see this working is by returning a cleanup function from the queryFn, which we could run before the queryFn is run the next time. However, we can't do that because the queryFn returns a Promise already.

Also, the queryFn should be idempotent, as it can be executed at arbitrary times (smart background refetches), and it can also be cancelled. It shouldn't have any observable side-effects like creating objects that need a cleanup. It's the same principle why the resource on the backend (GET endpoint) shouldn't have any observable side-effects.

[wolever]

Here's a little helper which will call Symbol.dispose on values as they are removed from the QueryCache: https://gist.github.com/wolever/30a34443a9b2982615bbd2e84cd9529e

/**
 * Subscribe to ``client``'s query cache and dispose of any values that have a
 * ``[Symbol.dispose]`` method.
 *
 * Notes:
 * - The exported ``SymbolDispose`` can be used if ``Symbol.dispose`` is not
 *   available.
 * - The ``createDisposingObjectUrl`` helper can be used to create a disposable
 *   object URL.
 *
 * For example::
 *
 *   const client = new QueryClient()
 *   queryClientDisposeOnCacheEvict(client)
 *
 *   export const MyComponent = () => {
 *     const imageQuery = useQuery({
 *       queryFn: () => {
 *         const blob = await fetch(...).then(r => r.blob())
 *         // Note: see the ``createDisposingObjectUrl`` helper.
 *         const url = URL.createObjectURL(blob)
 *         return { url, [Symbol.dispose]: () => URL.revokeObjectURL(url) }
 *       },
 *     })
 *     ...
 *   }
 */

[TkDodo]

this looks really promising, thanks for sharing. I thought that you also need to remove when you receive an update event, but you are doing that inside of add 👍

[TkDodo]

if you want, we can add this to community projects ?