Reload schema

Author: huv1k

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/src/components/Playground.tsx

@@ -83,7 +83,6 @@ export interface State {
   selectUserSessionId?: string
   codeGenerationPopupOpen: boolean
   disableQueryHeader: boolean
-  autoReloadSchema: boolean
   useVim: boolean
   userModelName: string
 
@@ -157,7 +156,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 +426,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 +480,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/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

@@ -79,7 +79,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/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}/>
       )
     }
   }