Merge pull request #376 from graphcool/reloadschema

Reload schema

Author: schickling

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

@@ -82,6 +82,11 @@ export const buildTemplate = (
         accelerator: 'Cmd+S',
         click: () => send('File', 'Save'),
       },
+      {
+        label: 'Reload Schema',
+        accelerator: 'Cmd+R',
+        click: () => send('Tab', 'ReloadSchema'),
+      },
     ],
   },
   {

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

@@ -179,6 +179,12 @@ cd ${folderPath}; graphql playground`)
     }
   }
 
+  reloadSchema = () => {
+    if (this.playground) {
+      this.playground.reloadSchema()
+    }
+  }
+
   componentDidMount() {
     ipcRenderer.removeListener('OpenUrl', pushOpenUrl)
     ipcRenderer.removeListener('OpenSelectedFile', pushSelectedFile)
@@ -462,6 +468,9 @@ cd ${folderPath}; graphql playground`)
       case 'Settings':
         this.openSettingsTab()
         break
+      case 'ReloadSchema':
+        this.reloadSchema()
+        break
     }
   }
 

packages/graphql-playground/package.json

@@ -113,6 +113,7 @@
     "calculate-size": "^1.1.1",
     "classnames": "^2.2.5",
     "codemirror": "^5.27.4",
+    "codemirror-graphql": "^0.6.12",
     "cuid": "^1.3.8",
     "graphcool-styles": "0.2.4",
     "graphcool-tmp-ui": "^0.0.11",
@@ -124,8 +125,10 @@
     "keycode": "^2.1.9",
     "lodash": "^4.17.4",
     "lodash.debounce": "^4.0.8",
+    "marked": "^0.3.9",
     "polished": "^1.9.0",
     "postcss-modules": "^0.6.4",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-addons-shallow-compare": "^15.6.2",
     "react-codemirror": "^1.0.0",

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

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import * as fetch from 'isomorphic-fetch'
 import { Provider } from 'react-redux'
 import createStore from '../createStore'
 import MiddlewareApp from './MiddlewareApp'

packages/graphql-playground/src/components/Playground.tsx

@@ -3,7 +3,7 @@ import { GraphQLEditor } from './Playground/GraphQLEditor'
 import * as fetch from 'isomorphic-fetch'
 import { TabBar } from './Playground/TabBar'
 import { defaultQuery, getDefaultSession } from '../constants'
-import { Session } from '../types'
+import { Session, ISettings } from '../types'
 import * as cuid from 'cuid'
 import * as Immutable from 'seamless-immutable'
 import PlaygroundStorage from './PlaygroundStorage'
@@ -25,7 +25,6 @@ import { isSharingAuthorization } from './Playground/util/session'
 import { SchemaFetcher } from './Playground/SchemaFetcher'
 import Settings from './Settings'
 import SettingsEditor from './SettingsEditor'
-import { ISettings } from '../types'
 import { GraphQLConfig } from '../graphqlConfig'
 import FileEditor from './FileEditor'
 
@@ -83,7 +82,6 @@ export interface State {
   selectUserSessionId?: string
   codeGenerationPopupOpen: boolean
   disableQueryHeader: boolean
-  autoReloadSchema: boolean
   useVim: boolean
   userModelName: string
 
@@ -157,7 +155,6 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
       selectUserSessionId: undefined,
       codeGenerationPopupOpen: false,
       disableQueryHeader: false,
-      autoReloadSchema: false,
       useVim: localStorage.getItem('useVim') === 'true' || false,
       shareAllTabs: true,
       shareHttpHeaders: true,
@@ -428,14 +425,7 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
   }
 
   setRef = (index: number, ref: any) => {
-    this.graphiqlComponents[index] = ref
-  }
-
-  toggleSchemaReload = () => {
-    this.setState(state => ({
-      ...state,
-      autoReloadSchema: !state.autoReloadSchema,
-    }))
+    this.graphiqlComponents[index] = ref.getWrappedInstance()
   }
 
   handleChangeSettings = (settings: string) => {
@@ -489,6 +479,15 @@ export class Playground extends React.PureComponent<Props & DocsState, State> {
     this.setValueInSession(session.id, 'hasChanged', false)
   }
 
+  public reloadSchema = () => {
+    if (this.graphiqlComponents) {
+      const editor = this.graphiqlComponents[this.state.selectedSessionIndex]
+      if (editor && editor.queryEditorComponent) {
+        editor.reloadSchema()
+      }
+    } 
+  }
+
   public openSettingsTab = () => {
     const sessionIndex = this.state.sessions.findIndex(s =>
       Boolean(s.isSettingsTab),

packages/graphql-playground/src/components/Playground/ExecuteButton.tsx

@@ -7,9 +7,8 @@
  */
 
 import * as React from 'react'
-import * as cx from 'classnames'
-import { withTheme, LocalThemeInterface } from '../Theme'
 import * as cn from 'classnames'
+import { withTheme, LocalThemeInterface } from '../Theme'
 import ExecuteButtonOperation from './ExecuteButtonOperation'
 
 export interface Props {
@@ -122,7 +121,7 @@ class ExecuteButton extends React.Component<
           }
         `}</style>
         <div
-          className={cx('graphcool-execute-button', this.props.localTheme, {
+          className={cn('graphcool-execute-button', this.props.localTheme, {
             running: this.props.isRunning,
           })}
           onMouseDown={onMouseDown}

packages/graphql-playground/src/components/Playground/GraphQLEditor.tsx

@@ -58,6 +58,7 @@ export interface Props {
   onClickHistory?: () => void
   onChangeEndpoint?: (value: string) => void
   onClickShare?: () => void
+  onRef: any
   getDefaultFieldNames?: () => any
   showCodeGeneration?: boolean
   showEndpoints?: boolean
@@ -705,7 +706,7 @@ export class GraphQLEditor extends React.PureComponent<
 
   // Private methods
 
-  private reloadSchema = async () => {
+  public reloadSchema = async () => {
     const result = await this.props.schemaFetcher.refetch(
       this.props.session.endpoint || this.props.endpoint,
       this.convertHeaders(this.props.session.headers),
@@ -1203,7 +1204,7 @@ export class GraphQLEditor extends React.PureComponent<
 }
 
 export default withTheme<Props>(
-  connect<any, any, Props>(getSessionDocs, { setStacks })(GraphQLEditor),
+  connect<any, any, Props>(getSessionDocs, { setStacks }, null, {withRef: true})(GraphQLEditor),
 )
 
 // Duck-type promise detection.

packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
-import { Session } from '../../types'
+import { Session, ISettings } from '../../types'
 import GraphQLEditor from './GraphQLEditor'
 import { SchemaFetcher } from './SchemaFetcher'
 import { SharingProps } from '../Share'
-import { ISettings } from '../../types'
 
 export interface Props {
   session: Session
@@ -79,7 +78,7 @@ export default class GraphQLEditorSession extends React.PureComponent<
         responses={responses}
         disableQueryHeader={disableQueryHeader}
         disableResize={false}
-        ref={this.setRef}
+        onRef={this.setRef}
         useVim={this.props.useVim}
         rerenderQuery={false}
         disableAnimation={true}

packages/graphql-playground/src/components/Playground/SchemaFetcher.ts

@@ -14,7 +14,7 @@ export class SchemaFetcher {
   }
   async fetch(endpoint: string, headers?: any) {
     const cachedSchema = this.cache.get(this.hash(endpoint, headers))
-    return cachedSchema || (await this.fetchSchema(endpoint, headers))
+    return cachedSchema || this.fetchSchema(endpoint, headers)
   }
   refetch(endpoint: string, headers: any) {
     return this.fetchSchema(endpoint, headers)

packages/graphql-playground/src/components/Theme/withTheme.tsx

@@ -1,8 +1,12 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 
-function withTheme<Props = {}>(Component): React.ComponentClass<Props> {
-  return class WithTheme extends React.Component<Props, {}> {
+export interface ThemeProps {
+  onRef?: any
+}
+
+function withTheme<Props = { onRef?: any}>(Component): React.ComponentClass<Props> {
+  return class WithTheme extends React.Component<Props & ThemeProps, {}> {
     static contextTypes = {
       localTheme: PropTypes.object,
     }
@@ -27,7 +31,7 @@ function withTheme<Props = {}>(Component): React.ComponentClass<Props> {
 
     render() {
       return (
-        <Component localTheme={this.context.localTheme.theme} {...this.props} />
+        <Component localTheme={this.context.localTheme.theme} {...this.props} ref={this.props.onRef}/>
       )
     }
   }