diff --git a/packages/graphql-playground-electron/src/main/menu.ts b/packages/graphql-playground-electron/src/main/menu.ts index 5a8afc9de..be1e543e8 100644 --- a/packages/graphql-playground-electron/src/main/menu.ts +++ b/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'), + }, ], }, { diff --git a/packages/graphql-playground-electron/src/renderer/components/App.tsx b/packages/graphql-playground-electron/src/renderer/components/App.tsx index 49b938e4b..a744a8765 100644 --- a/packages/graphql-playground-electron/src/renderer/components/App.tsx +++ b/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 } } diff --git a/packages/graphql-playground/package.json b/packages/graphql-playground/package.json index 3b1e09154..d83d4e270 100644 --- a/packages/graphql-playground/package.json +++ b/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", diff --git a/packages/graphql-playground/src/components/App.tsx b/packages/graphql-playground/src/components/App.tsx index 05ede03c3..eacff79c5 100644 --- a/packages/graphql-playground/src/components/App.tsx +++ b/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' diff --git a/packages/graphql-playground/src/components/Playground.tsx b/packages/graphql-playground/src/components/Playground.tsx index 7646d23f3..96a71a7f5 100644 --- a/packages/graphql-playground/src/components/Playground.tsx +++ b/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 { 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 { } 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 { 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), diff --git a/packages/graphql-playground/src/components/Playground/ExecuteButton.tsx b/packages/graphql-playground/src/components/Playground/ExecuteButton.tsx index 357808381..8eb3ad382 100644 --- a/packages/graphql-playground/src/components/Playground/ExecuteButton.tsx +++ b/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< } `}
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( - connect(getSessionDocs, { setStacks })(GraphQLEditor), + connect(getSessionDocs, { setStacks }, null, {withRef: true})(GraphQLEditor), ) // Duck-type promise detection. diff --git a/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx b/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx index f2c05e43c..9eb473940 100644 --- a/packages/graphql-playground/src/components/Playground/GraphQLEditorSession.tsx +++ b/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} diff --git a/packages/graphql-playground/src/components/Playground/SchemaFetcher.ts b/packages/graphql-playground/src/components/Playground/SchemaFetcher.ts index a7f93f0e1..6bdcd5e82 100644 --- a/packages/graphql-playground/src/components/Playground/SchemaFetcher.ts +++ b/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) diff --git a/packages/graphql-playground/src/components/Theme/withTheme.tsx b/packages/graphql-playground/src/components/Theme/withTheme.tsx index da4cc28b1..0cafc079b 100644 --- a/packages/graphql-playground/src/components/Theme/withTheme.tsx +++ b/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(Component): React.ComponentClass { - return class WithTheme extends React.Component { +export interface ThemeProps { + onRef?: any +} + +function withTheme(Component): React.ComponentClass { + return class WithTheme extends React.Component { static contextTypes = { localTheme: PropTypes.object, } @@ -27,7 +31,7 @@ function withTheme(Component): React.ComponentClass { render() { return ( - + ) } } diff --git a/packages/graphql-playground/src/styled/styled.ts b/packages/graphql-playground/src/styled/styled.ts index 521c1ba1c..ef80eccb9 100644 --- a/packages/graphql-playground/src/styled/styled.ts +++ b/packages/graphql-playground/src/styled/styled.ts @@ -1,5 +1,5 @@ import * as styledComponents from 'styled-components' -import { ThemedStyledComponentsModule } from 'styled-components' +import { ThemedStyledComponentsModule } from 'styled-components' // tslint:disable-line import { ThemeInterface, theme } from './theme' diff --git a/packages/graphql-playground/tslint.json b/packages/graphql-playground/tslint.json index dd90237d6..c36926df9 100644 --- a/packages/graphql-playground/tslint.json +++ b/packages/graphql-playground/tslint.json @@ -3,6 +3,7 @@ "tslint-graphcool-frontend" ], "rules": { - "forin": false + "forin": false, + "no-submodule-imports": false } } diff --git a/packages/graphql-playground/yarn.lock b/packages/graphql-playground/yarn.lock index 92c297f80..7d42ef01d 100644 --- a/packages/graphql-playground/yarn.lock +++ b/packages/graphql-playground/yarn.lock @@ -1591,7 +1591,7 @@ code-point-at@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77" -codemirror-graphql@^0.6.11: +codemirror-graphql@^0.6.11, codemirror-graphql@^0.6.12: version "0.6.12" resolved "https://registry.yarnpkg.com/codemirror-graphql/-/codemirror-graphql-0.6.12.tgz#91a273fe5188857524a30221d06e645b4ca41f00" dependencies: @@ -4503,6 +4503,10 @@ marked@0.3.6: version "0.3.6" resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" +marked@^0.3.9: + version "0.3.9" + resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.9.tgz#54ce6a57e720c3ac6098374ec625fcbcc97ff290" + math-expression-evaluator@^1.2.14: version "1.2.17" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"