Queries for unmounted components getting called after calling a mutation and resetStore.

[salujaharkirat]

We have an application built up on react-native, apollo and graphql. The application is a fintech app which contains a dashboard with list of portfolios, the user choose the portfolio, goes to payment page and can make payment after which he is redirected to dashboard.

We were looking to clear cache on login for handling multi user behavior. We tried implementing resetStore. This works fine when only queries were involved i.e. for unmounted components the queries were not called on resetStore. This was as according to #1319 and the fix apollographql/react-apollo#671.

When we placed the order (createOrderMutation) and then tried calling resetStore; user got logged out; then we tried logging in from a different user. At this point few of the queries are called on resetStore(dashboard query, portfolioDetailQuery, paymentScreenQuery etc..). Ideally no queries should be called beyond dashboardQuery as that is the only component that is currently mounted.

Intended outcome:
Queries for unmounted components should not get called after calling a mutation and resetStore

Actual outcome:
Queries for unmounted components are getting called after calling a mutation and resetStore

How to reproduce the issue:
We have 3 screens:-

1. dashboard containing portfolios
2. portfolio containing add money button
3. payment screen

Scenario:-

1. User chooses a portfolio he goes goes to portfolio Detail screen and then on pressing add money button he is redirected to payment screen.
2. Payment screen redirects to payment gateway after which user is redirected to dashboard.
3. On succesfull payment user is redirected to dashboard.
4. User is logged out
5. New user is logged in and resetStore is called --> unmounted components queries are called

[helfer]

Hi @jinxac, thanks for filing an issue. It sounds like this could be a bug in Apollo Client. Would you be able to provide a reproduction using the error-template? That would help us get to the bottom of the issue much quicker. Thanks!

[salujaharkirat]

yeah sure, let me try doing that

[salujaharkirat]

Hi @helfer I debugged this issue a little further by creating a new project itself and observed that it is not linked to mutations at all. Yeah that was bit of a surprise.

The actual issue is that the react-native navigator does not unmount the current component on pushing new component on top. It just adds to the stack. So I when i move from dashboard -> portfolio -> paymentScreen -> payment gateway -> paymentSuccess screen it keeps on adding to it. Now on PaymentSuccess I replace the route, but my Dashboard, Portfolio and PaymentScreen are still mounted as replace as just replaces the route on top of the navigator and previous routes are still mounted; and according to apollo active queries on resetStore are fired on reset store.

So instead of replace from navigator I tried using replaceTo from navigator which resets the stack and unmounts all components. Now on calling resetStore no active queries are present and it works fine.

I will go ahead and close this issue for now. Thanks for your help :)

[helfer]

@jinxac ok, glad you figured it out and thanks for telling us what the issue was! This will be helpful for other people who end up in the same situation!

[sabativi]

Hi @jinxac, would love to have more details on the react-navigation side as I am facing the same problem...

[salujaharkirat]

@sabativi sure would love to help. Can you help me understand the issue once?

[sabativi]

It seems that replaceTo solved your problem, can you point me towards some info about it ?