Prevent query from being aborted

Hi there :wave:

I’ve just stumbled on an interesting use-case. Is there a way how to prevent specific query from being aborted once the component that uses useQuery hook unmounts? In this use case this component might get mounted/unmounted repeatedly in very short time and I would like to achieve a scenario where the very first request actually gets fulfilled and if the second request would come in the meantime it would get resolved using deduplication.

Thanks in advance for any tips :muscle:

Currently using "@apollo/client": "3.6.8"

Hi @katzino :wave: welcome to the forum! I’ll look into this for you, it’s a busy time of year so bear with me :slight_smile:

Hey @JeffAuriemma, have you had a chance to take a look at this?

This sort of functionality would be extremely helpful since at the moment if a component unmounts (e.g. due to navigation) and then you go back to the same page (remounting the component with the same query), the original query has cancelled and it needs to start again.

You could pass a custom AbortSignal instance into the query.


useQuery(MY_QUERY, { context: { signal: mySignal }})

Hey @lenz, thanks for your reply.

Could you help me understand how a custom AbortSignal helps prevent queries from being cancelled and re-run on unmount / mount?

I’m looking for something similar to react-query refetchOnMount toggle, while also preventing queries from being cancelled on unmount (default functionality in react-query).

If you add a custom signal, AC will not add it’s own and leaves handling to you.

Generally, queries only rerun on remount if you specify so via fetchPolicy or if there is no data in the cache (and no query is already running for it)

Thanks @lenz, adding a custom AbortSignal does indeed stop the queries from being cancelled when unmounted.

However even when they resolve successfully it doesn’t look like Apollo is saving them to the cache. When navigating back to the original page, fresh queries are run instead. I’ve confirmed this using the Apollo dev tools.