Apollo-client-devtools: Cannot read property 'queryStore' of undefined, cannot convert null or undefined to object, unsafe-eval is not allowed source of script in the following CSP

[hinok]

npm ls --depth=0 | grep apollo
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Hey,
In our project apollo-client-devtools stopped working.
In the console inside the app, there is a reported error:

which is:

Also when I try to debug apollo devtools, in their console are reported errors below (here devtools has disappeared):

Is this something that we should fix on the our side?
Many thanks.

[steve-a-jones]

Getting this exact same error - happens when I click on the cache tab.

Chrome: Version 64.0.3282.140

[ostrebler]

Same here.

[BrianSandholdt]

I experience the same thing. Could this be an issue with latest update of Chrome?

[mfeeney]

Same here.

Version 64.0.3282.167 (Official Build) (64-bit)

[ghost]

I had the same error (Cannot read property 'queryStore' of undefined), but it was on an new project which I hadn't set up properly. My InMemoryCache.fragmentMatcher wasn't set up right, and when I fixed it the devtools problem was resolved.

Not sure if it will help anyone else here or not, but might be useful for future google hits :)

[alex88]

Same here with regular default installation that uses InMemoryCache with default settings

[sundeer]

Same here.
Chrome: Version 65.0.3325.162 (Official Build) (64-bit)
DevTools:
Version: 2.1.2
Updated: February 5, 2018
Size: 334KiB

Why v2.1.2 when the latest release here is v2.1.0?

[mekhami]

Ah, this problem fixed itself when I went back and double-checked my apollo client configuration.

I use vue-apollo, but my apolloProvider was not included by calling apolloProvider.provide() as per the documentation here: https://github.com/Akryum/vue-apollo#create-a-provider

I don't know about the other apollo client implementations, but this worked on my vue app and something similar will likely work with other clients.

[sflahave]

Just a few clues... indeed it seems that ApolloClient.queryManager is not getting set. You can verify this by typing window.__APOLLO_DEVTOOLS_GLOBAL_HOOK__ in your console prompt.

I stepped through some Apollo source code a bit. If you look at the source for ApolloClient (https://github.com/apollographql/apollo-client/blob/master/packages/apollo-client/src/ApolloClient.ts ) , you can see that there is a public method initQueryManager(). I tried adding a call to that method after creating my client: client.initQueryManager().

After doing that, I no longer see the error regarding queryStore. However, apollo-dev-tools still doesn't work - it disappears when I click on the Cache tab.

Looking at the source for ApolloClient more closely, you can see that it's constructor doesn't call initQueryManager. Rather, certain methods such as mutate, query, or subscribe call it. I don't know why it shouldn't be done in the constructor. As it is, unless your app starts off with a query (or some operation that triggers a call to initQueryManager) immediately, then ApolloClient.queryManager will be undefined and so the dev tool won't work.

[liywjl]

Still seems to be an issue with Chrome 66.0.3359.181 on OSX High Sierra 10.13.4

[loxy]

Same here...
Windows 10 - Chrome Version 66.0.3359.181 (Offizieller Build) (64-Bit)

[Mati365]

Any updates?

[ananth99]

Facing the same issue. Any updates on this one?

[caugner]

Same error when running the extension (2.1.3-1-g657a491) in Firefox Nightly (63.0a1 2018-07-22):

TypeError: t.queryManager is undefined[Weitere Informationen] backend.js:1:37152
    388/n.initBroadCastEvents/< moz-extension://f9b5882e-4bce-46af-bc33-c4cec624852b/dist/backend.js:1:37152
    64/t.prototype.emit moz-extension://f9b5882e-4bce-46af-bc33-c4cec624852b/dist/backend.js:1:52784
    n/< moz-extension://f9b5882e-4bce-46af-bc33-c4cec624852b/dist/backend.js:1:19517
    n moz-extension://f9b5882e-4bce-46af-bc33-c4cec624852b/dist/backend.js:1:36148

Steps to reproduce:

1. yarn install
2. yarn build
3. Open about:debugging in Firefox and load directory shells/webextension as temporary extension.
4. Open website with Apollo (in my case a Vue.js SPA with vue-apollo).

Actually, I get the following warning on the about:debugging page, which might be the cause:

background.persistent is not yet supported in Firefox (see MDN):

[lifeiscontent]

@peggyrayzis any updates here? Seems this issue has been here since Feb and no devs from the Apollo team have commented on the thread.

[jsiebern]

An update to this would be great, it worked once after installing the extension, but I'm getting this error ever since that.

Edit: Nevermind, I had 2 Apollo instances on the page, when I disable one it works fine!

[ananth99]

@jsiebern So the dev tools don't work with Apollo 2?

I use "react-apollo": "^2.1.4" & "apollo-client": "^2.3.1".

[jsiebern]

@ananth99 No, I literally meant 2 instances not the version 2! I believe the dev tools got confused having 2 clients on the same website, it worked for me when I didn't load the script tag of one of them

[capaj]

oh yeah we also have 2 apollo clients in our web app and we're seeing this issue. Would be really nice if dev tools would support that.

[devserkan]

In my case, using React Router causes this issue. Adding client.initQueryManager() just makes the error disappear but the problem persists. When I click cache I see an empty page. If I close and re-open the Devtools I can see the cache. So, does React Router cause a second initialization of the client here?

[devserkan]

Weird, it seems there isn't any problem right now. Maybe it needed a server restart, who knows :)

[daryn-k]

Same issue
Chrome version: 71.0.3578.98

[kruglay]

Still have the same issue