apollo-client: 'ObservableQuery with this id doesn't exist: id' on unmounted component

Found solution.

The error is raised by Promise returned by the fetchMore call. So, you have to catch that.

Insted of just calling (as in all examples):

fetchMore({variables: {...}, updateQuery: ()=>{...}})

Instead do (in ES6 syntax):

try { await fetchMore({variables: {...}, updateQuery: ()=>{...}}) catch { }

Then the async error thrown after component unmount is catched. The updateQuery function is not called as error is thrown before that. You could also handle the error a bit better, if more finer error control is needed than just supressing all errors.

Migrating from react-apollo-hooks to the official Apollo package squared this for me (ht @amille14 )

Still hapens for me in 2.6.0.

I’m having an issue which I think may be related to this. When a query is loading and the component unmounts before the query completes, then the network request gets cancelled (normal behavior). But when a fetchMore is loading and the component unmounts before it completes, then the network request does not get cancelled (abnormal behavior).

Hitting this issue when the variables of my <Query> changes while a fetchMore is still in progress.

This error happens to me in the following situation. (always reproducible)

1. In a page A which uses a query Q, click a button to fetchMore. This page has a search param in URL to get query result with different variables.
2. Before fetchMore finishes, move to another page A' which uses the same query Q but with different search params.
3. error ObservableQuery with this id doesn't exist happens.

I found a solution for this case; setting different keyfor <Query /> component (using search param) removes the error. If I understood correctly, it makes react to render a new <Query /> component, so it won’t try to update the previous query.

I’m not sure but also suspecting that this not only happens for fetchMore, but may happen between two components with the same query in some conditions. Unfortunately, I haven’t reproduced and found a solution for this “general” case.

Hope this helps.

As @sghall i’m getting this also using SSR with updateQuery, randomly

A lot of the Apollo Client internals have changed since v3 was launched. We recommend trying a more modern version of @apollo/client. Let us know if you’re still encountering this issue. Thanks!

I am also facing this issue, any solution alternative to catching the error, also not sure how to use the unique key, since on mount and unmount my same query is gonna call withs the same key name?

@jmurret @digitalmaster I simply passed a key in to the useQuery hook like this:

const { data, loading, error } = useQuery(myQuery, { variables: { ... }, key: 'some key' })

You can also use a key prop on apollo’s Query/Mutation components like so:

<Query query={myQuery} key='some key' variables={{ ... }}>
  ...
</Query>

Note that for the hooks I was using the react-apollo-hooks package. This was before Apollo released official support for hooks. I have no idea if passing a key to Apollo’s hooks will work the same way, though I do know that their hooks are based on that package so it might work.

I was seeing this, and it ended up being that I was resetting limit variables on a paginated query that uses fetchMore. I was doing it on a child component componentDidUnmount however (so it would be reset when you go back to the screen with the list). This was causing the query to refetch and immediately disappear. Not sure if that’s helpful for your issue or not, but figured I’d share!

+1 This happens with the graphql HOC for us. Not saying the <Query/> component doesn’t do it, we use the graphql HOC 95% of the time.

Hi,

We are seeing the issue when running tests in Jest because (I think) Jest fails when exceptions are thrown in promises but not caught. For us, it happens with the graphql() HOC when the fetchMore() has been invoked but its result arrives after the component has unmounted.

For now, we have applied the following patch (to apollo-client v2.4.6) as a workaround, simply to stop Jest seeing the uncaught exception:

diff --git a/node_modules/apollo-client/bundle.umd.js b/node_modules/apollo-client/bundle.umd.js
index 63a5534..71b64e7 100644
--- a/node_modules/apollo-client/bundle.umd.js
+++ b/node_modules/apollo-client/bundle.umd.js
@@ -287,7 +287,7 @@
                     });
                 });
                 return fetchMoreResult;
-            });
+            }).catch(() => {});
         };
         ObservableQuery.prototype.subscribeToMore = function (options) {
             var _this = this;

Note, we are on apollo-client v2.4.6 because we are using aws-appsync which requires this version!

@amille14 Do you have a snippet of how you added a key to the react hook?

@spilist thanks! adding a unique key to my query component (or in my case to my query hook, since i’m using react-apollo-hooks) fixed the issue

I am also getting ObservableQuery with this id doesn't exist: 13 during SSR and I cannot figure out what the problem is. In my cases it happens when I use the HOC and try to subscribeToMore AND use the updateQuery option. It works fine in the browser but on the server I get this error. If I remove the updateQuery it works fine on the server. Any ideas what to look at?