Not working in Electron

[jasonbahl]

I've got React, Redux and Devtron devtools working in Electron, but can't get apollo-client-devtools working.

I'm using electron-devtools-installer and the following:

installer.default('jdkknkkbebbapilgoeccciglkfbmbnfm', true )
      .then((name) => console.log(name, ' INSTALLED\n'))
      .catch((err) => console.log('An error occurred: ', err))

Outputs:

Apollo Client Developer Tools  INSTALLED

I'm using the same tool to download the other devtools as well.

However, when I open Electron devtools, I only see React, Redux and Devtron devtools, no sign of Apollo devtools.

I followed the logic and it looks like it's supposed to only instantiate if window.__APOLLO_CLIENT__ is set, and process.env.NODE_ENV is not production, and both are the case for me. . .but I still get no Apollo dev tools.

I have a pretty similar setup (same React/Apollo setup) in just a simple JS web app, and Apollo Dev Tools are present in Chrome, but just not in Electron.

I'll try and dig and see if I can find anything.

[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

[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.

[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.