fix(settings): Expose settings programmatically, update deps

graphql · Jan 31, 2018 · 0356557 · 0356557
1 parent 9ab9d48
commit 0356557
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 55 deletions.
diff --git a/packages/graphql-playground-electron/webpack.config.build.js b/packages/graphql-playground-electron/webpack.config.build.js
@@ -5,14 +5,15 @@ const path = require('path')
 const config = require('./webpack.config')
 const HappyPack = require('happypack')
 const os = require('os')
+const fs = require('fs')
 const UglifyJSParallelPlugin = require('webpack-uglify-parallel')
-const { renderPlaygroundPage } = require('graphql-playground-html');
+const { renderPlaygroundPage } = require('graphql-playground-html')
 
-const appEntrypoint = 'src/renderer/index.html' 
+const appEntrypoint = 'src/renderer/index.html'
 
 // Create the playground entry point if it doesn't exist
-if(!fs.existsSync(appEntrypoint)) {
-  fs.writeFileSync(appEntrypoint, renderPlaygroundPage({env: 'react'}));
+if (!fs.existsSync(appEntrypoint)) {
+  fs.writeFileSync(appEntrypoint, renderPlaygroundPage({ env: 'react' }))
 }
 
 module.exports = {
@@ -27,7 +28,7 @@ module.exports = {
     sourceMapFilename: '[file].map',
     publicPath: './',
   },
-   node: {
+  node: {
     __dirname: false,
     __filename: false,
   },
@@ -91,7 +92,7 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: JSON.stringify('production')
+        NODE_ENV: JSON.stringify('production'),
       },
       __EXAMPLE_ADDR__: '"https://dynamic-resources.graph.cool"',
     }),
@@ -111,7 +112,10 @@ module.exports = {
       mangle: false,
     }), */
     // https://github.com/graphql/graphql-language-service/issues/111
-    new webpack.ContextReplacementPlugin(/graphql-language-service-interface[\/\\]dist/, /\.js$/),
+    new webpack.ContextReplacementPlugin(
+      /graphql-language-service-interface[\/\\]dist/,
+      /\.js$/,
+    ),
     new webpack.NormalModuleReplacementPlugin(/\/iconv-loader$/, 'node-noop'),
     new webpack.optimize.CommonsChunkPlugin('vendor'),
     new webpack.optimize.ModuleConcatenationPlugin(),

diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "graphql-playground-react",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "main": "./lib/lib.js",
   "typings": "./lib/lib.d.ts",
   "description": "GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).",

diff --git a/packages/graphql-playground-react/src/components/App.tsx b/packages/graphql-playground-react/src/components/App.tsx
@@ -54,10 +54,10 @@ export default class App extends React.Component<Props, State> {
 
       // DOM side-effect:
       // #loading-wrapper is a hardcoded DOM element in the HTML entrypoint
-      const loadingWrapper = document.getElementById('loading-wrapper');
+      const loadingWrapper = document.getElementById('loading-wrapper')
 
       if (loadingWrapper) {
-        loadingWrapper.classList.remove('fadeOut');
+        loadingWrapper.classList.remove('fadeOut')
       }
 
       fetch('https://api.graph.cool/simple/v1/cj81hi46q03c30196uxaswrz2', {
@@ -80,7 +80,7 @@ export default class App extends React.Component<Props, State> {
         .then(res => res.json())
         .then(res => {
           if (loadingWrapper) {
-            loadingWrapper.classList.add('fadeOut');
+            loadingWrapper.classList.add('fadeOut')
           }
 
           if (!res.data || res.data.session === null) {
@@ -118,9 +118,8 @@ export default class App extends React.Component<Props, State> {
             }
           `}</style>
 
-          {this.state.loading ? (
-            null
-          ) : !this.state.endpoint || this.state.endpoint.length === 0 ? (
+          {this.state.loading ? null : !this.state.endpoint ||
+          this.state.endpoint.length === 0 ? (
             <ThemeProvider theme={styledTheme}>
               <EndpointPopup
                 onRequestClose={this.handleChangeEndpoint}
@@ -132,12 +131,12 @@ export default class App extends React.Component<Props, State> {
               />
             </ThemeProvider>
           ) : (
-                <MiddlewareApp
-                  endpoint={endpoint}
-                  subscriptionEndpoint={subscriptionEndpoint}
-                  session={this.state.session}
-                />
-              )}
+            <MiddlewareApp
+              endpoint={endpoint}
+              subscriptionEndpoint={subscriptionEndpoint}
+              session={this.state.session}
+            />
+          )}
         </div>
       </Provider>
     )

diff --git a/packages/graphql-playground-react/src/components/MiddlewareApp.tsx b/packages/graphql-playground-react/src/components/MiddlewareApp.tsx
@@ -7,7 +7,12 @@ import * as fetch from 'isomorphic-fetch'
 import { GraphQLConfig } from '../graphqlConfig'
 import * as yaml from 'js-yaml'
 import ProjectsSideNav from './ProjectsSideNav'
-import { styled, ThemeProvider, theme as styledTheme, keyframes } from '../styled'
+import {
+  styled,
+  ThemeProvider,
+  theme as styledTheme,
+  keyframes,
+} from '../styled'
 import OldThemeProvider from './Theme/ThemeProvider'
 import { getActiveEndpoints } from './util'
 import { ISettings } from '../types'
@@ -75,7 +80,7 @@ export default class MiddlewareApp extends React.Component<Props, State> {
   playground: IPlayground
   constructor(props: Props) {
     super(props)
-      ; (global as any).m = this
+    ;(global as any).m = this
 
     let settingsString = localStorage.getItem('settings') || defaultSettings
     settingsString = this.migrateSettingsString(settingsString)
@@ -116,7 +121,7 @@ export default class MiddlewareApp extends React.Component<Props, State> {
         undefined,
       subscriptionEndpoint,
       settingsString,
-      settings: this.getSettings(settingsString),
+      settings: this.props.settings || this.getSettings(settingsString),
       configIsYaml,
       configString: props.configString,
       activeEnv,
@@ -129,7 +134,7 @@ export default class MiddlewareApp extends React.Component<Props, State> {
     if (endpoint.includes('api.graph.cool')) {
       return `wss://subscriptions.graph.cool/v1/${
         endpoint.split('/').slice(-1)[0]
-        }`
+      }`
     }
 
     return endpoint
@@ -530,7 +535,7 @@ const appearIn = keyframes`
     opacity: 1;
     transform: translateY(0);
   }
-`;
+`
 
 const App = styled.div`
   display: flex;

diff --git a/packages/graphql-playground-react/src/components/Playground.tsx b/packages/graphql-playground-react/src/components/Playground.tsx
@@ -132,7 +132,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
     }
 
     const sessions = this.initSessions(props)
-    this.schemaFetcher = new SchemaFetcher()
+    this.schemaFetcher = new SchemaFetcher(this.props.settings)
 
     const selectedSessionIndex =
       parseInt(this.storage.getItem('selectedSessionIndex'), 10) || 0

diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
@@ -254,14 +254,9 @@ class GraphDocs extends React.Component<
     )
   }
 
-  public showDocFromType = (type) => {
-    this.props.toggleDocs(this.props.sessionId, true);
-    this.props.addStack(
-      this.props.sessionId,
-      type,
-      0,
-      0
-    )
+  public showDocFromType = type => {
+    this.props.toggleDocs(this.props.sessionId, true)
+    this.props.addStack(this.props.sessionId, type, 0, 0)
   }
 
   private setDocExplorerRef = ref => {
@@ -437,5 +432,5 @@ export default connect<StateFromProps, DispatchFromProps, Props>(
   getSessionDocs,
   mapDispatchToProps,
   null,
-  { withRef: true }
+  { withRef: true },
 )(GraphDocs)
diff --git a/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx b/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx
@@ -71,6 +71,7 @@ export class QueryEditor extends React.Component<Props, {}> {
     require('codemirror/addon/dialog/dialog')
     require('codemirror/addon/lint/lint')
     require('codemirror/keymap/sublime')
+    require('codemirror/keymap/vim')
     require('codemirror-graphql/hint')
     require('codemirror-graphql/lint')
     require('codemirror-graphql/info')
@@ -168,20 +169,6 @@ export class QueryEditor extends React.Component<Props, {}> {
       this.editor.options.info.schema = this.props.schema
       this.editor.options.jump.schema = this.props.schema
       CodeMirror.signal(this.editor, 'change', this.editor)
-      if (this.props.schema) {
-        const oldGetType = this.editor.options.hintOptions.schema.getType
-        /**
-         * DANGER! THIS IS AN EXTREME HACK. As soon, as codemirror-graphql doesn't use getType in .hint anymore
-         * this can be removed.
-         */
-        this.editor.options.hintOptions.schema.getType = type => {
-          const result = oldGetType.call(
-            this.editor.options.hintOptions.schema,
-            type,
-          )
-          return result || type
-        }
-      }
     }
     if (
       this.props.value !== prevProps.value &&
@@ -190,10 +177,6 @@ export class QueryEditor extends React.Component<Props, {}> {
       this.cachedValue = this.props.value
       this.editor.setValue(this.props.value)
     }
-    if (this.props.useVim !== prevProps.useVim) {
-      this.editor.options.keyMap = this.props.useVim ? 'vim' : 'sublime'
-      CodeMirror.signal(this.editor, 'change', this.editor)
-    }
     if (this.props.readOnly !== prevProps.readOnly) {
       this.editor.options.readOnly = this.props.readOnly
       CodeMirror.signal(this.editor, 'change', this.editor)

diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts b/packages/graphql-playground-react/src/components/Playground/SchemaFetcher.ts
@@ -1,6 +1,7 @@
 import { GraphQLSchema, introspectionQuery, buildClientSchema } from 'graphql'
 import * as stringify from 'json-stable-stringify'
 import { NoSchemaError } from './util/NoSchemaError'
+import { ISettings } from '../../types'
 
 export interface TracingSchemaTuple {
   schema: GraphQLSchema
@@ -9,7 +10,9 @@ export interface TracingSchemaTuple {
 
 export class SchemaFetcher {
   cache: Map<string, TracingSchemaTuple>
-  constructor() {
+  settings: ISettings
+  constructor(settings: ISettings) {
+    this.settings = settings
     this.cache = new Map()
   }
   async fetch(endpoint: string, headers?: any) {
@@ -28,7 +31,7 @@ export class SchemaFetcher {
   ): Promise<{ schema: GraphQLSchema; tracingSupported: boolean } | null> {
     const response = await fetch(endpoint, {
       method: 'post',
-      credentials: 'include',
+      credentials: this.settings['request.credentials'],
       headers: {
         'Content-Type': 'application/json',
         'X-Apollo-Tracing': '1',
@@ -48,6 +51,15 @@ export class SchemaFetcher {
     }
 
     const schema = buildClientSchema(schemaData.data)
+    /**
+     * DANGER! THIS IS AN EXTREME HACK. As soon, as codemirror-graphql doesn't use getType in .hint anymore
+     * this can be removed.
+     */
+    const oldGetType = schema.getType
+    schema.getType = type => {
+      const getTypeResult = oldGetType.call(schema, type)
+      return getTypeResult || type
+    }
     const tracingSupported =
       schemaData.extensions && Boolean(schemaData.extensions.tracing)
     const result = {

diff --git a/packages/graphql-playground-react/yarn.lock b/packages/graphql-playground-react/yarn.lock
@@ -3361,6 +3361,16 @@ [email protected]:
     minimatch "^3.0.4"
     rimraf "^2.6.2"
 
+[email protected]:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/graphql-config/-/graphql-config-1.1.7.tgz#546c443d3ad877ceb8e13f40fbc8937af0d35dbe"
+  dependencies:
+    graphql "^0.12.3"
+    graphql-import "^0.4.0"
+    graphql-request "^1.4.0"
+    js-yaml "^3.10.0"
+    minimatch "^3.0.4"
+
 graphql-import@^0.1.7:
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.1.9.tgz#9161f4f7ea92337b60fd40e22e64d3a68c212729"
@@ -3370,6 +3380,13 @@ graphql-import@^0.1.7:
     graphql "^0.12.3"
     lodash "^4.17.4"
 
+graphql-import@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/graphql-import/-/graphql-import-0.4.2.tgz#e4925e838cf41d69d81d3879788ef8ee77532977"
+  dependencies:
+    graphql "^0.12.3"
+    lodash "^4.17.4"
+
 graphql-language-service-interface@^1.0.16:
   version "1.0.18"
   resolved "https://registry.yarnpkg.com/graphql-language-service-interface/-/graphql-language-service-interface-1.0.18.tgz#c0fc1ef72c6f6f4bf9042bd7a8a8a66e0772caa8"
@@ -3409,6 +3426,12 @@ graphql-language-service-utils@^1.0.18:
     graphql-config "1.1.4"
     graphql-language-service-types "^1.0.18"
 
+graphql-playground-html@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/graphql-playground-html/-/graphql-playground-html-1.5.2.tgz#ccd97ac1960cfb1872b314bafb1957e7a6df7984"
+  dependencies:
+    graphql-config "1.1.7"
+
 graphql-request@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/graphql-request/-/graphql-request-1.4.1.tgz#0772743cfac8dfdd4d69d36106a96c9bdd191ce8"