Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unmounting Query component no longer cancels network request in v2.6.0 & v3 beta #4955

Closed
dylanwulf opened this issue Jun 13, 2019 · 21 comments
Assignees

Comments

@dylanwulf
Copy link
Contributor

dylanwulf commented Jun 13, 2019

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
Copy link
Contributor Author

dylanwulf commented Jun 13, 2019

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

@benjamn benjamn self-assigned this Jun 14, 2019
@dylanwulf
Copy link
Contributor Author

dylanwulf commented Sep 13, 2019

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
Copy link
Contributor Author

@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

@dylanwulf dylanwulf changed the title Unmounting Query component no longer cancels network request in v2.6.0 Unmounting Query component no longer cancels network request in v2.6.0 & v3 beta Jan 23, 2020
@mlarcher
Copy link

mlarcher commented Feb 5, 2020

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

@278kunal
Copy link

278kunal commented Mar 6, 2020

Apollo team doesn't care it seems.

@airstance
Copy link

airstance commented May 12, 2020

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
Copy link

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
Copy link
Contributor Author

dylanwulf commented May 18, 2020

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
Copy link

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
Copy link

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

@dylanwulf
Copy link
Contributor Author

dylanwulf commented Jul 10, 2020

@Superoryco
Copy link

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
Copy link

auguszou commented Dec 4, 2020

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
Copy link

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

@MartSurv
Copy link

MartSurv commented Feb 4, 2021

v3.3.7 still the same. Please fix this.

@asmyshlyaev177
Copy link

asmyshlyaev177 commented Feb 22, 2021

Still an issue.
When switch between pages, and page make 2 requests with different variables sometimes it's display data from fisrt request, other times from second.
Can't cancel stalled request, can't ignore old data.

Feels like if you build anything more complex that TODO list apollo client brings more problems and bugs than is solves.

UPD: with client version 3.3.3 it's cancel requests.

@Nedomas
Copy link

Nedomas commented Feb 22, 2021

@asmyshlyaev177 it looks like it does not cancel them for me with apollo-client@3.3.11 and next@10.0.7. Is this actually being worked on? Anybody has any other hacks apart from using client.query manually?

@asmyshlyaev177
Copy link

@asmyshlyaev177 it looks like it does not cancel them for me with apollo-client@3.3.11 and next@10.0.7. Is this actually being worked on? Anybody has any other hacks apart from using client.query manually?

Try version 3.3.3 and if everything works never update.

@dylanwulf
Copy link
Contributor Author

Looks like requests are now getting properly canceled on unmount in the latest version (v3.3.15). Closing! 😄
Updated reproduction that shows this is now working:
https://codesandbox.io/s/network-request-does-not-get-caneled-in-apollo-client-v3-beta-sckhn

@dwome
Copy link

dwome commented May 10, 2021

Issue still open for me with 3.3.15

@dylanwulf
Copy link
Contributor Author

@dwome The problem as I described it was fixed, so this issue will remain closed. If you're still having problems, please create a runnable reproduction and open a new issue. Creating a runnable reproduction that shows the issue is the fastest way to get it resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests