Unsubscribing from a query does not abort network requests

[knedev42]

Aborting network requests used to work in apollo-client 2.5.1, where they could be cancelled by either unmounting a component or unsubscribing from an observable query.

I skimmed through the code and it seems that if the browser supports AbortController, the http link should cancel pending requests when you unsubscribe from it, but it never does 🤷

Intended outcome:

When you subscribe to a query and later unsubscribe from it, while the network request is still in-flight, it should be aborted.

Actual outcome:

Network requests are never aborted.

Versions

npmPackages:
@apollo/client: ^3.1.3 => 3.1.3

[Torsten85]

I've seen the same bug.

Here is a sandbox with @apollo/link 3.2.1: https://codesandbox.io/s/apollo-client-321-unsubscribe-h76nh
And here is the same code with apollo-link: 2.5.1: https://codesandbox.io/s/apollo-client-251-unsubscribe-bh0mc

The unsubscribe method gets never called in 3.2.1 and thus not aborting the http request.

I've digged through the code and I think the problem is the following:

• The QueryManager uses Concast to manage observables.
• By unsubscribing (unmounting), Concast executes removeObserver and checks if the observer is the last one. If this is the case, I triggers unsubscribe on the underlying subscription (the one form the apollo link). (https://github.com/apollographql/apollo-client/blob/main/src/utilities/observables/Concast.ts#L121)
• This never happens, because QueryManager adds a cleanup observer. (https://github.com/apollographql/apollo-client/blob/main/src/core/QueryManager.ts#L727)
• The cleanup observer never gets called so it never removes itself from the observers set and so the subscription is never stopped (https://github.com/apollographql/apollo-client/blob/main/src/utilities/observables/Concast.ts#L199)

Would be great if someone could have a look at this.

[dylanwulf]

I actually submitted an issue about this over a year ago (#4955) and unfortunately it seems like it hasn't been resolved yet

[Torsten85]

Oh, did not find your ticket.

I think this should get way more attention. It's an ugly bug with an easy fix.

[brendanmoore]

I believe that part of the issue will be fixed in 3.3+. If you use your own watchQuery and manually unsubscribe. I am using this approach: https://gist.github.com/brendanmoore/8cd239c5b35983936581b61922b09b2e and it works flawlessly in 3.3.0-beta.16 as Apollo does use its own AbortController internally when you unsubscribe - (when using HttpLink).