diff --git a/postgraphiql/package.json b/postgraphiql/package.json index c1a9db4048..5cf0231475 100644 --- a/postgraphiql/package.json +++ b/postgraphiql/package.json @@ -4,8 +4,8 @@ "version": "1.0.0", "homepage": "https://graphile.org/postgraphile/", "dependencies": { - "graphiql": "^0.13.2", - "graphiql-explorer": "^0.4.5", + "graphiql": "^1.0.6", + "graphiql-explorer": "^0.6.1", "graphql": "^14.5.8", "react": "^16.12.0", "react-dom": "^16.12.0", diff --git a/postgraphiql/src/components/PostGraphiQL.js b/postgraphiql/src/components/PostGraphiQL.js index 1573d954f2..6e670d0c06 100644 --- a/postgraphiql/src/components/PostGraphiQL.js +++ b/postgraphiql/src/components/PostGraphiQL.js @@ -106,10 +106,6 @@ class PostGraphiQL extends React.PureComponent { POSTGRAPHILE_CONFIG.enhanceGraphiql && POSTGRAPHILE_CONFIG.subscriptions ? 'pending' : null, }; - _onEditQuery = query => { - this.setState({ query }); - }; - subscriptionsClient = POSTGRAPHILE_CONFIG.enhanceGraphiql && POSTGRAPHILE_CONFIG.subscriptions ? new SubscriptionClient(websocketUrl, { @@ -201,6 +197,7 @@ class PostGraphiQL extends React.PureComponent { } const graphiql = this.graphiql; this.setState({ query: graphiql._storage.get('query') || defaultQuery }); + const editor = graphiql.getQueryEditor(); editor.setOption('extraKeys', { ...(editor.options.extraKeys || {}), @@ -280,7 +277,7 @@ class PostGraphiQL extends React.PureComponent { /** * Get the user editable headers as an object */ - getHeaders() { + getHeaders = () => { const { headersText } = this.state; let extraHeaders; try { @@ -294,13 +291,13 @@ class PostGraphiQL extends React.PureComponent { // Do nothing } return extraHeaders; - } + }; /** * Executes a GraphQL query with some extra information then the standard * parameters. Namely a JWT which may be added as an `Authorization` header. */ - async executeQuery(graphQLParams) { + executeQuery = async graphQLParams => { const extraHeaders = this.getHeaders(); const response = await fetch(POSTGRAPHILE_CONFIG.graphqlUrl, { method: 'POST', @@ -323,7 +320,7 @@ class PostGraphiQL extends React.PureComponent { this.setState({ explainResult: result && result.explain ? result.explain : null }); return result; - } + }; /** * Routes the request either to the subscriptionClient or to executeQuery. @@ -333,22 +330,11 @@ class PostGraphiQL extends React.PureComponent { if (isSubscription(graphQLParams) && this.subscriptionsClient) { return { subscribe: observer => { - observer.next('Waiting for subscription to yield data…'); - - // Hack because GraphiQL logs `[object Object]` on error otherwise - const oldError = observer.error; - observer.error = function (error) { - let stack; - try { - stack = JSON.stringify(error, null, 2); - } catch (e) { - stack = error.message || error; - } - oldError.call(this, { - stack, - ...error, - }); - }; + setTimeout(() => { + // Without this timeout, this message doesn't display on the first + // subscription after the first render of the page. + observer.next('Waiting for subscription to yield data…'); + }, 0); const subscription = this.subscriptionsClient.request(graphQLParams).subscribe(observer); this.setState({ haveActiveSubscription: true }); @@ -409,6 +395,10 @@ class PostGraphiQL extends React.PureComponent { // Get the documentation explorer component from GraphiQL. Unfortunately // for them this looks like public API. Muwahahahaha. const { docExplorerComponent } = this.graphiql; + if (!docExplorerComponent) { + console.log('No docExplorerComponent, could not update navStack'); + return; + } const { navStack } = docExplorerComponent.state; // If one type/field isn’t find this will be set to false and the @@ -495,6 +485,28 @@ class PostGraphiQL extends React.PureComponent { return this.graphiql.getQueryEditor(); }; + handleEditQuery = query => { + this.setState({ query }); + }; + + handleEditHeaders = headersText => { + this.setState( + { + headersText, + headersTextValid: isValidJSON(headersText), + }, + () => { + if (this.state.headersTextValid && this.state.saveHeadersText) { + this._storage.set(STORAGE_KEYS.HEADERS_TEXT, this.state.headersText); + } + if (this.state.headersTextValid && this.subscriptionsClient) { + // Reconnect to websocket with new headers + this.subscriptionsClient.close(false, true); + } + }, + ); + }; + handlePrettifyQuery = () => { const editor = this.getQueryEditor(); if (typeof window.prettier !== 'undefined' && typeof window.prettierPlugins !== 'undefined') { @@ -654,18 +666,26 @@ class PostGraphiQL extends React.PureComponent { this.graphiql.handleRunQuery(operationName)} explorerIsOpen={this.state.explorerIsOpen} onToggleExplorer={this.handleToggleExplorer} //getDefaultScalarArgValue={getDefaultScalarArgValue} //makeDefaultArg={makeDefaultArg} /> - +
PostGraphile logo - + + + {POSTGRAPHILE_CONFIG.allowExplain ? ( ) : null} +
@@ -775,71 +806,10 @@ class PostGraphiQL extends React.PureComponent {
- - this.setState( - { - headersText: e.target.value, - headersTextValid: isValidJSON(e.target.value), - }, - () => { - if (this.state.headersTextValid && this.state.saveHeadersText) { - this._storage.set(STORAGE_KEYS.HEADERS_TEXT, this.state.headersText); - } - if (this.state.headersTextValid && this.subscriptionsClient) { - // Reconnect to websocket with new headers - this.subscriptionsClient.close(false, true); - } - }, - ) - } - > -
- {'\u2715'} -
-
); } } } -function EditHeaders({ children, open, value, onChange, valid, saveHeaders, toggleSaveHeaders }) { - return ( -
-
-
-
-
Edit Headers
-
{children}
-
-
- -