Apollo-client-devtools: Cache Doesn't Update on Page Reload

Created on 17 May 2018  路  16Comments  路  Source: apollographql/apollo-client-devtools

Expected: When the page is refreshed or reloaded, the Cache displayed in the developer tools should be refreshed to reflect the changed application state.

Actual: The Apollo developer continue to show the cache state when the Chrome developer tools were initially loaded, even when the page is refreshed and the cache-state (presumably) returns to the initial application state. The only way to get the correct cache state to display in the extension is to close Chrome developer tools, then re-open.

Steps to reproduce:

  1. Open a web-app using Apollo Client in development mode (NODE_ENV !== 'production').
  2. After the application loads, open Chrome developer tools, navigate to the Apollo tab and confirm that the Cache is visible.
  3. Interact with the application and observe the state of the cache change.
  4. Refresh the page: the cache state does not change.

In my steps to reproduce, I've actually submitted a form the executed a mutation... the results of which intersected the watched queries and therefore updated the cache state. Before reloading the page, I went into the local database and deleted the added records, guaranteeing that the state on refresh should change (when the queries are re-executed). However, I still see the mutation results in the displayed cache (even though they no longer exist in the database and the Network tab confirms they are not returned by the re-executed queries).

Most helpful comment

@zebulonj For a faster workflow, right click on the apollo section in the devtools and reload the frame. Still this should be correctly handled by the apollo devtools.

All 16 comments

@zebulonj For a faster workflow, right click on the apollo section in the devtools and reload the frame. Still this should be correctly handled by the apollo devtools.

I can't figure out how to clear cache at all sometimes. Even closing and restarting the dev tools sometimes caches content which I know I don't have in my local cache. Is someone working on this? Somehow not useful if it shows old data.

same problem here.
cache not update even after refresh the page.
the only way I could see the updates is when i switch the whole chrome theme to dark / light.
I have to do it every time I want to see the updated content in cache.
Windows 10
Chrome Version 68.0.3440.84 (Official Build) (64-bit)

@stellarhoof's method works intermittently for me. When it fails I get a connection timeout with the message "We couldn't detect Apollo Client in your app!"

OS X 10.11.6
Chrome: 68.0.3440.106 (Official Build) (64-bit)

Any update on this?

Yes this bug is really annoying literally wasted an hour because of this.

There are a couple ways you can clear the cache more quickly:

(1) Chrome DevTools: on the application, select 'Local Storage' and the localhost env you're developing in. Then above the 'Key' column, you can 'clear' the cache.

(2) You can use client.resetStore() to refresh the cache or client.clearStore() to clear the cache within the componentWillMount Lifecycle Hook on your main app.

async componentWillMount() { await client.resetStore(); }

https://www.apollographql.com/docs/react/api/apollo-client.html#ApolloClient.resetStore

note: these tips are for the general cache. @stellarhoof's work around for reloading the Apollo devtool is the best way I've found to fix the main bug in this thread.

No updates on this one?

I am using Apollo with Nextjs and I always see old data. I think I might go back to Redux if I cannot easily see what's in cache :/

It's not the best solution, but waiting for the fix I'm just checking the state from the chrome console:

> __APOLLO_CLIENT__.cache.data.data['Item:3066']

I know its kind of crappy but it was just pointed out to me that in Chrome you can right click in the dev tool and click "reload frame" and it will fix the issue of it getting stuck.

screen shot 2018-11-12 at 2 50 05 pm

At the very least we could add a "refresh" button like most plugins have to trigger a data reload instead of reloading the entire inspector frame.

I just joined the devtools project, thanks for the bug report. This is something we'll be looking at soon.

Unless I'm mistaken, this is a duplicate of #108. I'm going to close this issue. If I'm mistaken, please ping me and I'll re-open this.

@justinanastos Yes it's the same issue as far as I can see as well.

I wasted too much time on this.

Any updates on this? This is a pretty big (bad) issue from a developer experience standpoint.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jole78 picture jole78  路  7Comments

bbrinx picture bbrinx  路  6Comments

joesankey picture joesankey  路  5Comments

backjo picture backjo  路  6Comments

kissu picture kissu  路  4Comments