From bf8929a0ffc6fa7802f1ffdccb03c9a6b525927f Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 10 Jul 2025 14:05:54 +0200 Subject: [PATCH 1/4] update swapi to use GraphiQL 5 with Monaco editor --- .gitignore | 3 +- package.json | 2 +- public/index.html | 281 ++++++++++++++++++++++++++-------------------- 3 files changed, 164 insertions(+), 122 deletions(-) diff --git a/.gitignore b/.gitignore index 12c0db9..55d37da 100644 --- a/.gitignore +++ b/.gitignore @@ -7,4 +7,5 @@ npm-debug.log /cache/data.json # Local Netlify folder -.netlify +.netlify/ +.idea/ diff --git a/package.json b/package.json index a53ddc4..0adca6d 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "build": "rimraf lib && babel src --ignore __tests__,public,handler --out-dir lib/", "download": "babel-node scripts/download.js cache/data.json", "serve-public": "babel-node scripts/serve-public", - "prettier": "prettier --write 'src/**/*.js'", + "prettier": "prettier --write 'src/**/*.{js,html}'", "print-schema": "babel-node scripts/print-schema.js", "store-schema": "babel-node scripts/store-schema.js" }, diff --git a/public/index.html b/public/index.html index dca218e..98a4e49 100644 --- a/public/index.html +++ b/public/index.html @@ -1,129 +1,170 @@ - - - - - - SWAPI GraphQL API - - - - - - -
Loading…
- - - - - + + - + } catch (e) { + // Do nothing, we want to display the invalid JSON as a string, rather + // than present an error. + } + } + + // When the query and variables string is edited, update the URL bar so + // that it can be easily shared + function onEditQuery(newQuery) { + parameters.query = newQuery; + updateURL(); + } + + function onEditVariables(newVariables) { + parameters.variables = newVariables; + updateURL(); + } + + function onEditOperationName(newOperationName) { + parameters.operationName = newOperationName; + updateURL(); + } + + function updateURL() { + var newSearch = + '?' + + Object.keys(parameters) + .filter(function(key) { + return Boolean(parameters[key]); + }) + .map(function(key) { + return ( + encodeURIComponent(key) + + '=' + + encodeURIComponent(parameters[key]) + ); + }) + .join('&'); + history.replaceState(null, null, newSearch); + } + + const fetcher = createGraphiQLFetcher({ + url: + parameters.fetchURL || + '/graphql', + }); + const plugins = [HISTORY_PLUGIN, explorerPlugin()]; + + function App() { + return React.createElement(GraphiQL, { + fetcher: fetcher, + query: parameters.query, + variables: parameters.variables, + operationName: parameters.operationName, + onEditQuery: onEditQuery, + onEditVariables: onEditVariables, + onEditOperationName: onEditOperationName, + plugins, + }); + } + + const container = document.getElementById('graphiql'); + const root = ReactDOM.createRoot(container); + root.render(React.createElement(App)); + + +
+
Loading…
+
+ From a8b7079fb9829b51b3266f7796b9be974d76c80b Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 10 Jul 2025 14:16:13 +0200 Subject: [PATCH 2/4] Update public/index.html --- public/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/index.html b/public/index.html index 98a4e49..36baaba 100644 --- a/public/index.html +++ b/public/index.html @@ -148,8 +148,8 @@ function App() { return React.createElement(GraphiQL, { fetcher: fetcher, - query: parameters.query, - variables: parameters.variables, + initialQuery: parameters.query, + initialVariables: parameters.variables, operationName: parameters.operationName, onEditQuery: onEditQuery, onEditVariables: onEditVariables, From bd8c384b1ad00c489eee71309e50d5bd1aa6e0d1 Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 10 Jul 2025 18:40:40 +0200 Subject: [PATCH 3/4] move to head --- public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 36baaba..0e4dad3 100644 --- a/public/index.html +++ b/public/index.html @@ -48,7 +48,6 @@ } } - +
Loading…
From eeea91b1c1001881c03319d987f9f04c24a52b6c Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Tue, 15 Jul 2025 01:01:13 +0200 Subject: [PATCH 4/4] workaround to remove module "@emotion/is-prop-valid" not found in esm cdn --- public/index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index 0e4dad3..f4955a5 100644 --- a/public/index.html +++ b/public/index.html @@ -30,6 +30,7 @@ href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css" /> +