Not working in Electron about apollo-client-devtools

[jasonbahl]

for now I've settled on just adding this to my app for now:

 if (process.env.NODE_ENV === 'development') {
     BrowserWindow.addDevToolsExtension( 'jdkknkkbebbapilgoeccciglkfbmbnfm' );
}

Since that seems to be working, I'll probably just keep using that.

[jasonbahl]

Ok, so I did some digging and based on the Electron docs here (https://github.com/electron/electron/blob/master/docs/tutorial/devtools-extension.md) I was able to get Apollo Dev Tools working by adding the following:

BrowserWindow.addDevToolsExtension( '~/Library/Application Support/Google/Chrome/Default/Extensions/jdkknkkbebbapilgoeccciglkfbmbnfm/1.0.5_0' );

The other dev-tools work without having to specify this in my code, but adding this for Apollo Dev Tools got it working.

I'm not super familiar with the Dev Tools API's, but I'm curious if there's something that could be changed so that the Dev tools are instantiated, like the other dev tools, without the explicit call being added.

I have a feeling it might be related to how the panel is instantiated here: https://github.com/apollographql/apollo-client-devtools/blob/master/extension/devtools.js

It seems like the other dev tools create the panel without any conditions being checked, and check conditions inside the panel itself, such as Redux Dev Tools:
https://github.com/zalmoxisus/redux-devtools-extension/blob/master/src/browser/extension/devtools/index.js

[jasonbahl]

Ah. . .

Digging some more, I'm seeing the React Dev Tools doing conditional creation of the panel based on similar criteria to what the Apollo Dev Tools check, however, they've added a listener to check if React is added after page load. My guess is that by time the Apollo Dev Tools are instantiated in Electron it's too early for window.__APOLLO_CLIENT__ to evaluate as true, so the Apollo dev tools just never create the panel.

I'll submit a PR for this.

[stubailo]

We should be polling constantly for that value to show up, so it would be surprising if that were the issue.

[jasonbahl]

I submitted a PR #24

Not 100% sure yet that solves the issue. I'll play with it a bit more to confirm tomorrow.

[daniman]

@jasonbahl Were you able to confirm if #24 fixes this issue? If so, I can merge it and release a new version of the devtools :)

[jasonbahl]

Sorry. Haven't followed up. Will check today and let you know for sure

[jasonbahl]

So, I'm not exactly sure how to test this locally. From what I can tell, Electron is downloading straight from the Chrome store when compiling, so I'm not quite sure how to override and have it use my local copy of Apollo Devtools instead. . .I'll dig and see if I can figure that out so I can test properly locally.

For now, my only solution has been to manually add:

 if (process.env.NODE_ENV === 'development') {
    BrowserWindow.addDevToolsExtension( '~/Library/Application Support/Google/Chrome/Default/Extensions/jdkknkkbebbapilgoeccciglkfbmbnfm/1.0.8_0' );
}

For the moment, that also means I have to manually keep the version number updated, which is obviously not ideal. . .

If I can get Electron to use my local copy of DevTools so I can fully test this, I'll let you know.

Thanks,

Jason

[danielkv]

did not word for me

[lucasbaze]

Unfortunately this did not work for me either.

It seems to only work for me if I delete everything in the extensions folder of electron and then add the path to the downloaded apollo-client-dev-tools chrome extension. It will work the first time it's loaded, but after quitting and reopening the application, it doesn't load anymore.