Graphql-playground: Get Electron build working

[acao]

Since becoming maintainer of this project, and making some security updates, we have not been able to get the electron build working. This is why there has not been a release in a while.

This is no small undertaking, but very very important!

[vardhanapoorv]

I gave this a shot, after few version package changes now the yarn release:mac is building successfully. Though when I click the app I get a message saying "Loading GraphQL Playground" and then blank screen. Will dig more into this, let me know if you have any suggestions @acao .

[acao]

looks like progress! now you’ll need to open the dev tools in the electron app to see what’s up. there should be a process in the readme that describes how to run a watcher for both the webpack and electron build, might require two processes at once

[vardhanapoorv]

Fixed few more errors, now need to fix this Uncaught Error: React is running in production mode, but dead code elimination has not been applied. Read how to correctly configure React for production: https://fb.me/react-perf-use-the-production-build (saw in console of electron app) , after this I think it should be good.

[acao]

looking better, yeah! can you push what you have?

[vardhanapoorv]

@acao I fixed the above error but still get the same broken UI like above. When I enter URL and click open, then console has the error TypeError: Cannot read property 'store' of null. I think that the bundle generated is missing it. I will dig into the webpack config generating the bundle (maybe something is missing there).
Do you have any suggestions?

[acao]

it looks close! looks like it just needs the CSS loader to be reconfigured somehow, and we need to revisit how the redux store is being loaded, in case a breaking change in a redux dependency or some such impacted that

[vardhanapoorv]

@acao got it to load the playground successfully now! Schema is getting fetched and docs tab is correct as well but I get this error Uncaught Error: Expected { __allowedLegacyNames: undefined, _queryType: Query, _mutationType: Mutation, ... } to be a GraphQL schema. in console when I start typing the query. The CSS part is because of the loader as you suggested, the styled-jsx-postcss/babel is missing from before I think it's because of that, trying to fix that.
Any suggestions for the schema error?

[vardhanapoorv]

@acao got that error fixed, now playground is running queries as expected! Now just need to fix the CSS loading for the initial view, apart from that I think everything else is looking good now!
I have updated the PR for this.

[acao]

@vardhanapoorv awesome work!

[vardhanapoorv]

@acao I'm not able to get the current setup for postcss to work. I tried few ways but no success yet. Error from happypack loader Invalid PostCSS Plugin found: [0]
Not sure if changes will be needed to the fork of postcss-inherit that we are using. Should we have the CSS defined here itself since there isn't much?
Maybe I'm missing something very silly in the config. Any suggestions on how to go about this?

[acao]

@vardhanapoorv good question, try getting rid of the postcss loader for now. not very important with the electron runtime

[vardhanapoorv]

@acao I actually fixed it a bit but still some part of postcss (postcss-inherit I think) isn't getting applied. Anyway I have for now just added the CSS classes directly it looks good to me! so I have updated PR, can check the postcss thing later if needed. You can review it.

[acao]

looking fantastic! i'll take a look here soon

[hkumar0132]

@acao I had like to work on this issue.