apollo-client-devtools: Cache Doesn't Update on Page Reload
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:
- Open a web-app using Apollo Client in development mode (
NODE_ENV !== 'production'). - After the application loads, open Chrome developer tools, navigate to the Apollo tab and confirm that the Cache is visible.
- Interact with the application and observe the state of the cache change.
- 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).
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 64
- Comments: 16 (2 by maintainers)
@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 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.
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.
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.
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 😕
I just joined the devtools project, thanks for the bug report. This is something we’ll be looking at soon.
It’s not the best solution, but waiting for the fix I’m just checking the state from the chrome console:
I wasted too much time on this.
@justinanastos Yes it’s the same issue as far as I can see as well.
@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)
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)