Vue-apollo: Store reset while query was in flight (not completed in link chain)

[firstaml-dima]

Describe the bug
I regularly receive the ApolloError: "Store reset while query was in flight (not completed in link chain)".

This seems to be intermittent, and subsequent queries still work.

I can't figure out how to reproduce it.

To Reproduce
I do not know the cause.

Expected behavior
The ability to make Apollo queries & mutations at any time.

Versions
nuxt: 2.10.2
vue-apollo: ^3.0.0

Additional context
I believe I am making all queries with a single Apollo Client instance.

[dmitry]

If it happens inside the onError you might be need to wait until all the queries are completed with the following code:

                      await apolloProvider.defaultClient.queryManager.fetchQueryRejectFns;
                      await apolloProvider.defaultClient.resetStore();

[pouyamiralayi]

Hi @dmitry i am getting this error from my error hook, what do you suggest to prevent this?

[dmitry]

@pouyamiralayi any details, code? Are you calling the resetStore function?

[pouyamiralayi]

hi @dmitry my environment is same as @firstaml-dima. i am using smart-queries and i am using clearStore inside below code which is placed in my apollo default config file:

const errorLink = onError(({graphQLErrors, networkError}) => {
    try{
      if (graphQLErrors)
        graphQLErrors.map(async ({message, locations, path}) => {
          if(message.toLowerCase().includes("user not found")){
            const client = context.app.apolloProvider.defaultClient
            await client.clearStore()
            context.store.commit('auth/logout')
            context.app.router.push("/")
          }
          console.log(
            `[GraphQL error]: Message: ${message}, Location: ${JSON.stringify(locations)}, Path: ${JSON.stringify(path)}`
          )
        }

        )
    }
    catch (e) {
      console.log("errorLink: ", e)
    }
  })

worth mentioning that i am not getting this error from the above code (based on my console logs) but i am getting this error while i am starting or re fetching smart queries. my app was fine before i add the above code to my config file. as you said, it might be from clearing the store. i have already applied your suggestion but it does not work for me (basically as i said i am not getting the error at above). BTW my queries are working fine even with this issue but the trouble is that i change my ui based on the error hook behavior and that is causing me some pain. ;)
cheers!

[dmitry]

So you have tried to do the following:

const client = context.app.apolloProvider.defaultClient
await client.queryManager.fetchQueryRejectFns;
await client.clearStore()

and it still doesn't work without an exception?

[pouyamiralayi]

Hi! i have applied your suggestion snippet every time i want to start or re fetch the smart queries, and since then the number of times that i have seen that error is reduced to 1, only when i start the query for the first time; and that is tolerable. thanks @dmitry
i know that queries each have a separate cache (forgive me here if i am wrong!) but i guess that cache is not aware of the components life cycle.
cheers!

[dmitry]

@pouyamiralayi what kind of cache do you mean? You can control cache via fetchPolicy.

[pouyamiralayi]

Yes dear @dmitry i just realized that when the query is completed (ui has been updated by the results) and i make a transition to another page (router push), this error happens!
from apollo's perspective it seems that even i have the result in my cache, but it is still doing something in the background and by making transitions it will be interrupted!
for the fetchPolicy you suggested i set it to no-cache but nothing changed so i guess this is not a cache related issue, sorry for my misunderstanding.
i just tried your snippet in beforeDestory hook but it has no effect.
cheers!