It's not possible to reset store without query refetching

[alekbarszczewski]

I am using following middleware to handle authorization:

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};
    }
    const accessToken = store.state.session.accessToken;
    if (accessToken) {
      req.options.headers['authorization'] = `Bearer ${accessToken}`;
    }
    next();
  }
}]);

In my component (for authenticated users) I use following query:

apollo: {
  projects: {
    query: gql`
      query projectList {
        projects {
          id
          name
          created_at
        }
      }
    `,
    fetchPolicy: 'cache-and-network',
  },
},

When user logs out, I clear accessToken, call apollo.resetStore() and redirect to /login page.
The problem is that after calling apollo.resetStore() apollo automatically refetches projectList query, however it receives 401 error since accessToken had been cleared. I tried to use $skipAll option like this:

apollo: {
  projects: {
    query: gql`
      query projectList {
        projects {
          id
          name
          created_at
        }
      }
    `,
    fetchPolicy: 'cache-and-network',
  },
  $skipAll () {
    console.log('SKIP', !this.isLoggedIn);
    return !this.isLoggedIn;
  },
},

But it is not called at all when apollo automatically refetches queries after apollo.resetStore(). Is there any other way to clearStore without refetching queries?

[AlexandreBonaventure]

related to apollographql/apollo-client#1509

[jvbianchi]

I got the same problem.

[jvbianchi]

Looks like react-apollo had the same issue, until this PR apollographql/react-apollo#531

There was this PR apollographql/apollo-client#1636 that introduced a new fetch policy "standby" for this kind of use case

[Risbot]

@alekbarszczewski

you can try this:
client.cache.reset()

[gijo-varghese]

@Akryum it would be very useful for others if you can add it to docs. Thanks @Risbot

[Adverbly]

For others with multiple clients, you can run this from inside a component:

Object.values(this.$apollo.provider.clients)
    .forEach(client => client.cache.reset())

[stantoncbradley]

@Risbot sharing your solution across related issues. thanks!

[b4dnewz]

does cache.reset() clear the store data?
I rely on query result to show the profile data

apollo: {
    profile: GetProfile
}

<div v-if="profile">
// user data
</div>

When I call cache.reset() on logout the cache is cleared (i can see by inspecting $apollo object) but the store profile field/data is still populated and the div with the profile data does not disappear.

On logout I would like to clear cache and store data (without re-running queries) and get the view updated as it happen after a mutation for example.

What is the proper way to do it? Thanks in advance

[bswank]

Just found my way here & want to make sure you got your answer, @b4dnewz. You still need help with clearing your store?

[b4dnewz]

@bswank actually with the latest version it does not happen, or at least I've not experienced it anymore
but if you want to share your thoughts and a clarification about the arguments it's well accepted 👍

[marianocodes]

@Akryum This ticket shouldn't be closed. Smart queries still ignore the skip function/flag when data is refetched