From 23fe7d9621a6a20bc280746d63f2ecfe31565517 Mon Sep 17 00:00:00 2001
From: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
Date: Fri, 26 Aug 2022 16:15:48 +0200
Subject: [PATCH] use `createGraphiQLFetcher` to fix missing headers

---
 public/index.html | 151 +++++++++++++++++++++++-----------------------
 1 file changed, 76 insertions(+), 75 deletions(-)
diff --git a/public/index.html b/public/index.html
index 1165186..033ee75 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,55 +1,64 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="robots" content="noindex" />
-  <meta name="referrer" content="origin" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>SWAPI GraphQL API</title>
-  <style>
-    body {
-      height: 100vh;
-      margin: 0;
-      overflow: hidden;
-    }
-    #splash {
-      color: #333;
-      display: flex;
-      flex-direction: column;
-      font-family: system, -apple-system, "San Francisco", ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP", "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
-      height: 100vh;
-      justify-content: center;
-      text-align: center;
-    }
-  </style>
-  <link rel="icon" href="favicon.ico">
-  <link type="text/css" href="//unpkg.com/graphiql/graphiql.min.css" rel="stylesheet" />
-</head>
-<body>
-  <div id="splash">
-    Loading&hellip;
-  </div>
-  <script src="//cdn.jsdelivr.net/es6-promise/4.0.5/es6-promise.auto.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
-  <script src="//unpkg.com/graphiql/graphiql.min.js"></script>
-  <script>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="robots" content="noindex" />
+    <meta name="referrer" content="origin" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SWAPI GraphQL API</title>
+    <style>
+      body {
+        height: 100vh;
+        margin: 0;
+        overflow: hidden;
+      }
+      #splash {
+        color: #333;
+        display: flex;
+        flex-direction: column;
+        font-family: system, -apple-system, "San Francisco",
+          ".SFNSDisplay-Regular", "Segoe UI", Segoe, "Segoe WP",
+          "Helvetica Neue", helvetica, "Lucida Grande", arial, sans-serif;
+        height: 100vh;
+        justify-content: center;
+        text-align: center;
+      }
+    </style>
+    <link rel="icon" href="favicon.ico" />
+    <link
+      type="text/css"
+      href="//unpkg.com/graphiql/graphiql.min.css"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div id="splash">Loading&hellip;</div>
+    <script src="//unpkg.com/react/umd/react.production.min.js"></script>
+    <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
+    <script src="//unpkg.com/graphiql/graphiql.min.js"></script>
+    <script>
       // Parse the search string to get url parameters.
       var search = window.location.search;
       var parameters = {};
-      search.substr(1).split('&').forEach(function (entry) {
-        var eq = entry.indexOf('=');
-        if (eq >= 0) {
-          parameters[decodeURIComponent(entry.slice(0, eq))] =
-            decodeURIComponent(entry.slice(eq + 1));
-        }
-      });
+      search
+        .substr(1)
+        .split("&")
+        .forEach(function (entry) {
+          var eq = entry.indexOf("=");
+          if (eq >= 0) {
+            parameters[decodeURIComponent(entry.slice(0, eq))] =
+              decodeURIComponent(entry.slice(eq + 1));
+          }
+        });
 
       // if variables was provided, try to format it.
       if (parameters.variables) {
         try {
-          parameters.variables =
-            JSON.stringify(JSON.parse(parameters.variables), null, 2);
+          parameters.variables = JSON.stringify(
+            JSON.parse(parameters.variables),
+            null,
+            2
+          );
         } catch (e) {
           // Do nothing, we want to display the invalid JSON as a string, rather
           // than present an error.
@@ -71,50 +80,42 @@
         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('&');
+        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);
       }
 
-       function graphQLFetcher(graphQLParams) {
-          // This example expects a GraphQL server at the path /graphql.
-          // Change this to point wherever you host your GraphQL server.
-          return fetch(parameters.fetchURL || 'https://swapi-graphql.netlify.app/.netlify/functions/index', {
-            method: 'post',
-            headers: {
-              'Accept': 'application/json',
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(graphQLParams),
-          }).then(function (response) {
-            return response.text();
-          }).then(function (responseBody) {
-            try {
-              return JSON.parse(responseBody);
-            } catch (error) {
-              return responseBody;
-            }
-          });
-        }
+      const fetcher = GraphiQL.createFetcher({
+        url:
+          parameters.fetchURL ||
+          "https://swapi-graphql.netlify.app/.netlify/functions/index",
+      });
 
       // Render <GraphiQL /> into the body.
       ReactDOM.render(
         React.createElement(GraphiQL, {
-          fetcher: graphQLFetcher,
+          fetcher: fetcher,
           query: parameters.query,
           variables: parameters.variables,
           operationName: parameters.operationName,
           onEditQuery: onEditQuery,
           onEditVariables: onEditVariables,
-          onEditOperationName: onEditOperationName
+          onEditOperationName: onEditOperationName,
         }),
-        document.body,
+        document.body
       );
-  </script>
-</body>
+    </script>
+  </body>
 </html>
-
