React-apollo: Component won´t rerender with new data after client.resetStore()

[piotrblasiak]

Love apollo, but I have this problem...

Steps to Reproduce

1. Render component:

@graphql(gql`
  {
    me {
      id
      name
    }
  }
`)
class MyComponent extends PureComponent { ... }

1. Call apolloClient.resetStore()

Buggy Behavior

The component is not rerendered with a clared store. In this case I had logged out the user so the query should give me {me: null} but it still gives me the old object.

Expected Behavior

It should give me a null object for "me" since I´ve logged out and cleared the store like the docs say.

Version

• [email protected]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[jbaxleyiii]

Bringing in an issue from AC to see if we can improve this:

Intended outcome:

resetStore clears the Apollo data

Actual outcome:
resetStore only refetches, there is no point where data in components is cleared

How to reproduce the issue:

error repo: https://github.com/stantoncbradley/apollo-reset-store

1. Run the app :)
2. Clicking resetStore button triggers Apollo resetStore
3. App logs nextProps as the come in through componentWillReceiveProps
4. At no point in the logs is the data cleared

Our actual use case is a user signing out of our app. We noticed if another user logs in and one of the queries fails, data from the last user displays! It was never cleared!!!!

[stantoncbradley]

really like to see this get fixed! it's imperative that we completely clear our user data after the user logs out!!! 🙏

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stantoncbradley]

this is still a big issue. We are locked into react-apollo "1.1.3" so we don't accidentally leak private data until this issue is resovled

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stantoncbradley]

@jbaxleyiii this is still an issue as far as I'm aware. related to #858 and #890 too

[mitjade]

Still an issue also in apollo-client 2.0 beta.

[mitjade]

Please add this to https://github.com/apollographql/apollo-client/milestone/9.

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!

[tsnieman]

I believe this is still a problem in 2.0 and should be re-opened.

[stantoncbradley]

this is a really big issue and I'm afraid it's not well known, nor getting the attention it deserves. To be clear, react-apollo isn't properly clearing user data and there are scenarios where react-apollo can leak (sensitive) data after the store has been "cleared". If more people realized they have this known issue in production, I don't think they would be happy with Apollo

[jbaxleyiii]

@stantoncbradley this is on my radar for my next focus on cleaning up react-apollo 👍

[stantoncbradley]

Thanks @jbaxleyiii looking forward to it 😄

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[tcasey]

Pretty sure this is still an issue

[gpoitch]

Any workarounds for this? I tried manually recreating the client cache to no avail.

[stantoncbradley]

@jbaxleyiii hopefully this is still on your radar? Major security concern for us. We can't upgrade til this is fixed

[n1ru4l]

@gpoitch Currently you can use writeQuery to overwrite the existing query with null.

[n1ru4l]

I created a failing test for this here: https://github.com/n1ru4l/react-apollo/commit/e358061c6883e4795cc3943bd4ee8517c28bc629

Edit: I am not 100% sure but I think this might be an issue that could be solved in apollo-client.

Edit 2:

I digged into the apollo-client codebase and found some things:

When you create an observableQuery using client.watchQuery and subscribe to it it will only publish data once the networkRequest has finished.

const data = {
  me: {
    id: 1,
    __typename: 'Person',
    login: 'peterpan'
  },
};

const link = new ApolloLink(() => {
  return new Observable(observer => {
    setTimeout(() => {
      observer.next({ data });
      observer.complete();
    }, 10)
  });
});

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({}),
});

const query = gql`
  query me {
    me {
       id
       login
    }
  }
`

const observableQuery = client.watchQuery({
  query,
});

observableQuery.subscribe({
  next: console.log,
})

setTimeout(() => client.resetStore(), 100);

// first console.log call
{
  data: { me: { id: 1, login: 'peterpan', __typename: 'Person' } },
  loading: false,
  networkStatus: 7,
  stale: false
}
// second console.log call
{
  data: { me: { id: 1, login: 'peterpan', __typename: 'Person' } },
  loading: false,
  networkStatus: 7,
  stale: false
}

This might be intended, however I do not understand why there is never a loading "state" published by the observable. Would be nice if anyone could explain this..

The step that prevents this data to be published is here: https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/src/core/QueryManager.ts#L460

Edit 3:

Seems like notifyOnNetworkStatusChange is meant to publish that info. By using this option on the graphql hoc (e.g. graphql(query, { options: { notifyOnNetworkStatusChange: true } })(LoginDisplay);) this option also does not result in the component rerendering with any networkStatus or loading changes.

Maybe this is already another issue?

[idris]

Does client.cache.reset() fix this? I _think_ that should clear out the cache?

[DJTB]

cache.reset() didn't appear to help my use case (logout, store.reset(), login)
still using notifyOnNetworkStatusChange: true as a workaround

[consolenaut]

Are there any updates on this one? Its been over a year and this issue still seems fairly active

Is there a best-practice workaround for clearing the cache to defaults and triggering query re-renders when, for example, a user logs out?

I'm using apollo-link-state to store a local logged-in status which I'm querying in a container, then using the results of that query to conditionally route/redirect, but right now my query isn't being re-rendered, at least with client.cache.reset()

[lorensr]

Here's a current repro of a cache-only <Query> not updating after resetStore()

https://codesandbox.io/s/72x4okp5m1

Versions
[email protected]

[hwillson]

React Apollo has been refactored to use React Hooks behind the scenes for everything, which means a lot has changed since this issue was opened (and a lot of outstanding issues have been resolved). We'll close this issue off, but please let us know if you're still encountering this problem using React Apollo >= 3.1.0. Thanks!