From 1d1b2df2df6e5240049e6f8d32524b8ca361e0de Mon Sep 17 00:00:00 2001 From: bshah6 Date: Wed, 27 May 2020 03:32:48 -0700 Subject: [PATCH 1/2] integrate grpahiql-code-exporter extension --- .gitignore | 4 + package-lock.json | 130 ++++++++++++++------------- package.json | 4 +- resources/build.sh | 2 + src/GraphiQLWithExtensions.js | 163 +++++++++++++++++++++------------- 5 files changed, 177 insertions(+), 126 deletions(-) diff --git a/.gitignore b/.gitignore index 8bb27af..25feee7 100644 --- a/.gitignore +++ b/.gitignore @@ -24,7 +24,11 @@ dist/ /graphiqlWithExtensions.js /graphiqlWithExtensions.min.js /graphiqlWithExtensions.css +/graphiqlCodeExporter.css .merlin lib/ /.bsb.lock + +# ide +/.idea diff --git a/package-lock.json b/package-lock.json index 3592f74..16e5f23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -356,7 +356,7 @@ }, "autoprefixer": { "version": "7.2.6", - "resolved": "http://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz", "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==", "dev": true, "requires": { @@ -1545,12 +1545,6 @@ "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=", "dev": true }, - "builtin-modules": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz", - "integrity": "sha1-Jw8HbFpywC9bZaR9+Uxf46J4iS8=", - "dev": true - }, "builtin-status-codes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", @@ -1610,9 +1604,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30000921", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000921.tgz", - "integrity": "sha512-Bu09ciy0lMWLgpYC77I0YGuI8eFRBPPzaSOYJK1jTI64txCphYCqnWbxJYjHABYVt/TYX/p3jNjLBR87u1Bfpw==", + "version": "1.0.30001066", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001066.tgz", + "integrity": "sha512-Gfj/WAastBtfxLws0RCh2sDbTK/8rJuSeZMecrSkNGYxPcv7EzblmDGfWQCFEQcSqYE2BRgQiJh8HOD07N5hIw==", "dev": true }, "caseless": { @@ -2356,9 +2350,9 @@ } }, "electron-to-chromium": { - "version": "1.3.91", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.91.tgz", - "integrity": "sha512-wOWwM4vQpmb97VNkExnwE5e/sUMUb7NXurlEnhE89JOarUp6FOOMKjtTGgj9bmqskZkeRA7u+p0IztJ/y2OP5Q==", + "version": "1.3.453", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.453.tgz", + "integrity": "sha512-IQbCfjJR0NDDn/+vojTlq7fPSREcALtF8M1n01gw7nQghCtfFYrJ2dfhsp8APr8bANoFC8vRTFVXMOGpT0eetw==", "dev": true }, "elegant-spinner": { @@ -3668,7 +3662,7 @@ }, "globby": { "version": "6.1.0", - "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -3715,10 +3709,18 @@ } } }, + "graphiql-code-exporter": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/graphiql-code-exporter/-/graphiql-code-exporter-2.0.8.tgz", + "integrity": "sha512-vgNfnLWM+gGi8fVpqEb/Pq8CBc7foewZu2+tXmnZ/cd7TLd+T9fX2Ni18bp/aAEAS8xmX/KmzzCcneroxMjdIA==", + "requires": { + "copy-to-clipboard": "^3.0.8" + } + }, "graphiql-explorer": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.4.4.tgz", - "integrity": "sha512-NuQ1XAjZwykKb9GoHM6ofI9qITZ8Lue/mXi1Bj3/ZbGZv1Srk3sz0QkKQ5jBaxmuS3Ay09LRvJQSOr0Ci1dlfg==" + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/graphiql-explorer/-/graphiql-explorer-0.6.2.tgz", + "integrity": "sha512-hYSM+TI/0IAXltMOL7YXrvnA5xrKoDjjN7qiksxca2DY7yu46cyHVHG0IKIrBozMDBQLvFOhQMPrzplErwVZ1g==" }, "graphql": { "version": "14.5.4", @@ -3984,9 +3986,9 @@ } }, "hosted-git-info": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", - "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==", "dev": true }, "html-encoding-sniffer": { @@ -4238,15 +4240,6 @@ "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", "dev": true }, - "is-builtin-module": { - "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", - "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", - "dev": true, - "requires": { - "builtin-modules": "^1.0.0" - } - }, "is-callable": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz", @@ -4988,7 +4981,7 @@ }, "load-json-file": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz", "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=", "dev": true, "requires": { @@ -5447,15 +5440,26 @@ } }, "normalize-package-data": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", - "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", + "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", "dev": true, "requires": { "hosted-git-info": "^2.1.4", - "is-builtin-module": "^1.0.0", + "resolve": "^1.10.0", "semver": "2 || 3 || 4 || 5", "validate-npm-package-license": "^3.0.1" + }, + "dependencies": { + "resolve": { + "version": "1.17.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", + "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==", + "dev": true, + "requires": { + "path-parse": "^1.0.6" + } + } } }, "normalize-path": { @@ -5925,7 +5929,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -5983,9 +5987,9 @@ } }, "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { "ansi-styles": "^3.2.1", @@ -6058,9 +6062,9 @@ }, "dependencies": { "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { "ansi-styles": "^3.2.1", @@ -6109,9 +6113,9 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true } } @@ -6142,9 +6146,9 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true } } @@ -6175,9 +6179,9 @@ } }, "minimist": { - "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", - "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true } } @@ -7407,9 +7411,9 @@ "dev": true }, "spdx-correct": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", - "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -7417,15 +7421,15 @@ } }, "spdx-exceptions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", - "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", + "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", "dev": true }, "spdx-expression-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", "dev": true, "requires": { "spdx-exceptions": "^2.1.0", @@ -7433,9 +7437,9 @@ } }, "spdx-license-ids": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.2.tgz", - "integrity": "sha512-qky9CVt0lVIECkEsYbNILVnPvycuEBkXoMFLRWsREkomQLevYhtRKC+R91a5TOAQ3bCMjikRwhyaRqj1VYatYg==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz", + "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", "dev": true }, "split-string": { @@ -8309,7 +8313,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { diff --git a/package.json b/package.json index f0ea1b1..339963a 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "graphiqlWithExtensions.js", "graphiqlWithExtensions.min.js", "graphiqlWithExtensions.css", + "graphiqlCodeExporter.css", "README.md", "LICENSE" ], @@ -82,7 +83,8 @@ }, "dependencies": { "graphiql": "^0.14.2", - "graphiql-explorer": "^0.4.4", + "graphiql-code-exporter": "^2.0.8", + "graphiql-explorer": "^0.6.2", "graphql": "^14.5.4" } } diff --git a/resources/build.sh b/resources/build.sh index 5adfbca..9c19ded 100755 --- a/resources/build.sh +++ b/resources/build.sh @@ -16,6 +16,8 @@ echo "Bundling graphiqlWithExtensions.min.js..." browserify -g browserify-shim -t uglifyify -s GraphiQLWithExtensions dist/index.js | uglifyjs -c > graphiqlWithExtensions.min.js echo "Expose original css from GraphiQL(graphiql.css)" cp node_modules/graphiql/graphiql.css ./graphiqlWithExtensions.css +echo "Expose original css from GraphiqlCodeExporter (CodeExporter.css)" +cp node_modules/graphiql-code-exporter/CodeExporter.css ./graphiqlCodeExporter.css # echo "Bundling graphiql.css..." # postcss --no-map --use autoprefixer -d dist/ css/*.css # cat dist/*.css > graphiql.css diff --git a/src/GraphiQLWithExtensions.js b/src/GraphiQLWithExtensions.js index 25198b9..343d87a 100644 --- a/src/GraphiQLWithExtensions.js +++ b/src/GraphiQLWithExtensions.js @@ -1,34 +1,40 @@ import React, {Component} from 'react'; import GraphiQL from 'graphiql'; import GraphiQLExplorer from 'graphiql-explorer'; +import CodeExporter from 'graphiql-code-exporter'; +import codeExporterDefaultSnippets from 'graphiql-code-exporter/lib/snippets'; import {buildClientSchema, getIntrospectionQuery, parse} from 'graphql'; class GraphiQLWithExtensions extends Component { _graphiql: GraphiQL; + state = { schema: null, query: this.props.defaultQuery, explorerIsOpen: false, disableExplorer: this.props.disableExplorer, + codeExporterIsOpen: false, + disableCodeExporter: this.props.disableCodeExporter }; componentDidMount() { this.props - .fetcher({ - query: getIntrospectionQuery(), - }) - .then(result => { - const editor = this._graphiql.getQueryEditor(); - editor.setOption('extraKeys', { - ...(editor.options.extraKeys || {}), - 'Shift-Alt-LeftClick': this._handleInspectOperation, - }); - - this.setState({schema: buildClientSchema(result.data)}); + .fetcher({ + query: getIntrospectionQuery(), + }) + .then(result => { + const editor = this._graphiql.getQueryEditor(); + editor.setOption('extraKeys', { + ...(editor.options.extraKeys || {}), + 'Shift-Alt-LeftClick': this._handleInspectOperation, }); + + this.setState({schema: buildClientSchema(result.data)}); + }); } - _handleInspectOperation = (cm: any, mousePos: {line: Number, ch: Number}) => { + _handleInspectOperation = (cm: any, + mousePos: { line: Number, ch: Number }) => { let parsedQuery; try { parsedQuery = parse(this.state.query || ''); @@ -63,24 +69,24 @@ class GraphiQLWithExtensions extends Component { if (!def) { console.error( - 'Unable to find definition corresponding to mouse position', + 'Unable to find definition corresponding to mouse position', ); return null; } var operationKind = - def.kind === 'OperationDefinition' - ? def.operation - : def.kind === 'FragmentDefinition' - ? 'fragment' - : 'unknown'; + def.kind === 'OperationDefinition' + ? def.operation + : def.kind === 'FragmentDefinition' + ? 'fragment' + : 'unknown'; var operationName = - def.kind === 'OperationDefinition' && !!def.name - ? def.name.value - : def.kind === 'FragmentDefinition' && !!def.name - ? def.name.value - : 'unknown'; + def.kind === 'OperationDefinition' && !!def.name + ? def.name.value + : def.kind === 'FragmentDefinition' && !!def.name + ? def.name.value + : 'unknown'; var selector = `.graphiql-explorer-root #${operationKind}-${operationName}`; @@ -90,70 +96,103 @@ class GraphiQLWithExtensions extends Component { _handleEditQuery = (query: string): void => { this.setState({query}); - if (this.props.onEditQuery) this.props.onEditQuery(query); + if (this.props.onEditQuery) { + this.props.onEditQuery(query); + } }; _handleEditVariables = variables => { - if (this.props.onEditVariables) this.props.onEditVariables(variables); + if (this.props.onEditVariables) { + this.props.onEditVariables(variables); + } }; _handleEditOperationName = operation => { - if (this.props.onEditOperationName) + if (this.props.onEditOperationName) { this.props.onEditOperationName(operation); + } }; _handleToggleExplorer = () => { this.setState({explorerIsOpen: !this.state.explorerIsOpen}); }; - _handleToggleCodeExporter = () => - this.setState({ - codeExporterIsOpen: !this.state.codeExporterIsOpen, - }); + _handleToggleCodeExporter = () => { + this.setState({codeExporterIsOpen: !this.state.codeExporterIsOpen}); + } render() { const {query, schema} = this.state; - return ( -
- {this.props.disableExplorer ? null : ( - - )} - (this._graphiql = ref)} - fetcher={this.props.fetcher} - schema={schema} - query={query} - onEditQuery={this._handleEditQuery} - onEditVariables={this._handleEditVariables} - onEditOperationName={this._handleEditOperationName}> - - this._graphiql.handlePrettifyQuery()} - label="Prettify" - title="Prettify Query (Shift-Ctrl-P)" - /> - this._graphiql.handleToggleHistory()} - label="History" - title="Show History" + /> + ); + + const codeExporter = this.props.disableCodeExporter ? null : ( + this.state.codeExporterIsOpen ? ( + - {this.props.disableExplorer ? null : ( + ) : null + ); + + return ( +
+ {explorer} + (this._graphiql = ref)} + fetcher={this.props.fetcher} + schema={schema} + query={query} + onEditQuery={this._handleEditQuery} + onEditVariables={this._handleEditVariables} + onEditOperationName={this._handleEditOperationName}> + + this._graphiql.handlePrettifyQuery()} + label="Prettify" + title="Prettify Query (Shift-Ctrl-P)" + /> this._graphiql.handleToggleHistory()} + label="History" + title="Show History" /> - )} - - -
+ + {this.props.disableExplorer ? null : ( + + )} + + {this.props.disableCodeExporter ? null : ( + + )} + + + {codeExporter} +
); } } From 07ec26147cfec454e48503afa3900d7b0258f7ae Mon Sep 17 00:00:00 2001 From: bshah6 Date: Tue, 14 Jul 2020 20:16:29 -0700 Subject: [PATCH 2/2] pass headers and appId in properties --- examples/static.html | 87 ++++++++++++++++++++++++++--------- src/GraphiQLWithExtensions.js | 8 ++-- 2 files changed, 69 insertions(+), 26 deletions(-) diff --git a/examples/static.html b/examples/static.html index 087b742..171b827 100644 --- a/examples/static.html +++ b/examples/static.html @@ -1,6 +1,7 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +