electron: add dotenv support, fix session creation

Author: timsuchanek

package.json

@@ -16,5 +16,8 @@
     "hapi": "16.6.2",
     "koa": "2.4.1",
     "rimraf": "2.6.2"
+  },
+  "dependencies": {
+    "dotenv": "^5.0.1"
   }
 }

packages/graphql-playground-electron/src/main/index.ts

@@ -93,6 +93,8 @@ ipcMain.on('cwd', (event, msg) => {
   windowContext.windowByPath.set(cwd, window)
 })
 
+ipcMain.on('CloseWindow', () => app.quit())
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.

packages/graphql-playground-electron/src/renderer/components/App.tsx

@@ -13,6 +13,7 @@ import Playground, {
   getSessionsState,
   saveFile,
   newFileTab,
+  getEndpoint,
 } from 'graphql-playground-react'
 import {
   getGraphQLConfig,
@@ -32,6 +33,8 @@ import { patchEndpointsToConfigData as patchPrismaEndpointsToConfigData } from '
 import { patchEndpointsToConfigData } from 'graphql-config-extension-graphcool'
 import { connect } from 'react-redux'
 import { errify } from '../utils/errify'
+import { createStructuredSelector } from 'reselect'
+import * as dotenv from 'dotenv'
 
 // import { PermissionSession } from 'graphql-playground/lib/types'
 
@@ -84,9 +87,10 @@ interface ReduxProps {
   selectPrevTab: () => void
   closeSelectedTab: () => void
   fetchSchema: () => void
-  newSession: () => void
+  newSession: (endpoint: string) => void
   saveFile: () => void
   newFileTab: (fileName: string, filePath: string, file: string) => void
+  endpoint: string
 }
 
 class App extends React.Component<ReduxProps, State> {
@@ -129,17 +133,18 @@ class App extends React.Component<ReduxProps, State> {
   handleSelectFolder = async (folderPath: string) => {
     try {
       // Get config from folderPath
+      dotenv.config({ path: folderPath })
       const configPath = findGraphQLConfigFile(folderPath)
       const configString = fs.readFileSync(configPath, 'utf-8')
 
       /* tslint:disable-next-line */
-      if (configString.includes('${env:')) {
-        errify(`You opened a .graphqlconfig file that includes environment variables.
-In order to use environment variables in the Playground, please start it from the graphql cli. Install with
-npm install -g graphql-cli
-Then open the graphql config with:
-cd ${folderPath}; graphql playground`)
-      }
+      //       if (configString.includes('${env:')) {
+      //         errify(`You opened a .graphqlconfig file that includes environment variables.
+      // In order to use environment variables in the Playground, please start it from the graphql cli. Install with
+      // npm install -g graphql-cli
+      // Then open the graphql config with:
+      // cd ${folderPath}; graphql playground`)
+      //       }
 
       const configDir = path.dirname(configPath)
       let config = await patchEndpointsToConfigData(
@@ -193,7 +198,7 @@ cd ${folderPath}; graphql playground`)
   }
 
   newTab = () => {
-    this.props.newSession()
+    this.props.newSession(this.props.endpoint)
   }
 
   closeTab = () => {
@@ -214,7 +219,12 @@ cd ${folderPath}; graphql playground`)
     window.addEventListener('keydown', this.handleKeyDown, true)
     this.consumeEvents()
     ipcRenderer.send('ready', '')
-    if (!this.state.endpoint && !this.state.config && !this.state.configPath && !this.state.configString) {
+    if (
+      !this.state.endpoint &&
+      !this.state.config &&
+      !this.state.configPath &&
+      !this.state.configString
+    ) {
       const workspace = this.deserializeWorkspace()
       if (workspace) {
         this.setState(workspace)
@@ -535,7 +545,11 @@ cd ${folderPath}; graphql playground`)
         this.newTab()
         break
       case 'Close':
-        this.closeTab()
+        if (!this.state.endpoint && !this.state.config) {
+          ipcRenderer.send('CloseWindow')
+        } else {
+          this.closeTab()
+        }
         break
       case 'Settings':
         this.openSettingsTab()
@@ -610,7 +624,11 @@ cd ${folderPath}; graphql playground`)
   }
 }
 
-export default connect(null, {
+const mapStateToProps = createStructuredSelector({
+  endpoint: getEndpoint,
+})
+
+export default connect(mapStateToProps, {
   openSettingsTab,
   selectNextTab,
   selectPrevTab,

yarn.lock

@@ -214,6 +214,10 @@ dotenv@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-0.4.0.tgz#f6fb351363c2d92207245c737802c9ab5ae1495a"
 
+dotenv@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+
 [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"