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..f4955a5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,129 +1,172 @@
-
-
-
-
-
- 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,
+ initialQuery: parameters.query,
+ initialVariables: 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));
+
+
+
+
+