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

npm ls --depth=0 | grep apollo
├── apollo-cache-inmemory@1.1.5
├── apollo-client@2.2.1
├── apollo-fetch@0.7.0
├── apollo-link-batch-http@1.0.4
├── react-apollo@2.0.4

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

zrzut ekranu 2018-02-09 o 16 17 08

which is:

zrzut ekranu 2018-02-09 o 16 17 32

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

zrzut ekranu 2018-02-09 o 16 16 48

zrzut ekranu 2018-02-09 o 16 16 31

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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 27
Comments: 23

Most upvoted comments

Same issue Chrome version: 71.0.3578.98

daryn-k on Dec 14, 2018

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

lifeiscontent on Jul 23, 2018

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 on Nov 28, 2018

@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

jsiebern on Aug 23, 2018

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.

sflahave on Mar 31, 2018

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

alex88 on Mar 6, 2018