Apollo-client: Unmounting Query component no longer cancels network request in v2.6.0 & v3 beta

[dylanwulf]

Intended outcome:
When a Query component unmounts before the network request completes, the network request should be canceled. This worked in apollo-client 2.5.1.

Actual outcome:
In v2.6.x, unmounting a Query component before the network request completes does not cancel the request.

How to reproduce the issue:
Example of the network request correctly being cancelled with apollo-client v2.5.1: https://codesandbox.io/s/4vt2f

Example of the network request not being cancelled with apollo-client v2.6.2:
https://codesandbox.io/s/0yo3f

The only difference between these two examples is the apollo-client package (v2.5.1/v2.6.2)

Versions
apollo-cache-inmemory: 1.6.0
apollo-client: 2.6.2
apollo-link: 1.2.11
apollo-link-http: 1.5.14
react-apollo: 2.5.6

Thank you! :) I'm loving Apollo Client so far

[dylanwulf]

I also have a somewhat unrelated question: is there any chance #2813 could get some love? I keep running into it when trying to implement pagination. The issue has existed for 1.5 years but nothing has been done yet

[dylanwulf]

Update: recently I've been creating my own ApolloLink, which led me to learn more about Observables and the ApolloClient API. When writing tests for my Link, I discovered that calling unsubscribe on an ObservableQuery subscription does not reach the link chain:

const queryObservable = client.watchQuery({ query });
const subscription = queryObservable.subscribe({ ... });
// some time later...
subscription.unsubscribe(); // <-- this doesn't seem to reach the link chain

I hope this information is helpful in debugging the problem

[dylanwulf]

@benjamn I updated my reproduction to use the new apollo-client v3 beta and the problem still exists (https://codesandbox.io/s/network-request-does-not-get-caneled-in-apollo-client-v3-beta-sckhn)

By the way, I saw your presentation on the graphql summit livestream. Very excited to start using the new features of v3

[mlarcher]

It's been 8 month since this issue was opened... Is there anything we can do to help the team address it ?

[278kunal]

Apollo team doesn't care it seems.

[airstance]

I must be doing something wrong because this is really bad. It will crash every time if the user navigates to a different page in my React app while there's a pending fetchMore. I'm not even sure it's only fetchMore. It would appear to be any long running query/mutation. Has this really always been there?

Edit: As a side note, I found this workaround on a related issue and it at least cleans things up:

Wrap fetchMore in try/catch

[javiercr]

We're experiencing the same problem on a React Native app using apollo-client 2.6.x. If the user navigates to a different screen while the current screen is still fetching data we get the error and the app crashes (in production).

Wrapping fetchMore with a try/catch block seems to be the only solution available at the moment. Is there any plan to fix this in apollo-client v3.0.0 before the final release?

[dylanwulf]

Just so you guys know, this issue is _not_ about fetchMore. fetchMore requests have never been cancelled. There are a couple issues over on the feature-requests repo to add the ability to cancel fetchMore requests. But this issue is _only_ about cancelling the initial query that begins when the component mounts.

[laplacesdemon]

I end up having the following errors in tests because of this:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Is there a way to tell apollo to ignore the response if the component is unmounted (rather than actually cancelling the request)

[ArtGurianov]

switched to using client.query() + useEffect with cleanup. Until better times. 😫

[dylanwulf]

Still a problem in v3 rc12: https://codesandbox.io/s/network-request-does-not-get-caneled-in-apollo-client-v3-beta-sckhn

[Superoryco]

I end up having the following errors in tests because of this:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Is there a way to tell apollo to ignore the response if the component is unmounted (rather than actually cancelling the request)

I encountered same issue with useQuery/useMutation, If you just want to get rid of the error warning instead of canceling the request, maybe you could read the following: https://dev.to/rodw1995/cancel-your-promises-when-a-component-unmounts-gkl

basically, it's just a promise returned by hooks not being canceled before unmount.

took me 2 hours trying to cancel the request...

@ArtGurianov

[auguszou]

I end up having the following errors in tests because of this:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Is there a way to tell apollo to ignore the response if the component is unmounted (rather than actually cancelling the request)

I encountered same issue with useQuery/useMutation, If you just want to get rid of the error warning instead of canceling the request, maybe you could read the following: https://dev.to/rodw1995/cancel-your-promises-when-a-component-unmounts-gkl

basically, it's just a promise returned by hooks not being canceled before unmount.

took me 2 hours trying to cancel the request...

@ArtGurianov

problem is gone after upgraded apollo-client 3.3.3

[learnitmyway]

Using useQuery with v3.3.6 still seems to have the issue

[land47]

Still not fixed ;((