use top-level await in examples & middleware (#344)

graphql-kit · Aug 7, 2023 · 247eeb8 · 247eeb8
1 parent 4b62afa
commit 247eeb8
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 13 deletions.
diff --git a/example/cdn/index.html b/example/cdn/index.html
@@ -26,9 +26,9 @@
   </head>
   <body>
     <div id="voyager">Loading...</div>
-    <script>
+    <script type="module">
       const { init, voyagerIntrospectionQuery: query } = GraphQLVoyager;
-      const introspection = fetch(
+      const response = await fetch(
         'https://swapi-graphql.netlify.app/.netlify/functions/index',
         {
           method: 'post',
@@ -39,7 +39,8 @@
           body: JSON.stringify({ query }),
           credentials: 'omit',
         },
-      ).then((response) => response.json());
+      );
+      const introspection = await response.json();
 
       // Render <Voyager /> into the body.
       GraphQLVoyager.init(document.getElementById('voyager'), {

diff --git a/example/webpack/index.html b/example/webpack/index.html
@@ -19,7 +19,6 @@
   </head>
   <body>
     <div id="voyager">Loading...</div>
-    <script src="/webpack-dev-server.js"></script>
     <script src="/main.js"></script>
   </body>
 </html>
diff --git a/example/webpack/index.tsx b/example/webpack/index.tsx
@@ -2,7 +2,7 @@ import * as ReactDOMClient from 'react-dom/client';
 
 import { Voyager, voyagerIntrospectionQuery } from 'graphql-voyager';
 
-const introspection = fetch(
+const response = await fetch(
   'https://swapi-graphql.netlify.app/.netlify/functions/index',
   {
     method: 'post',
@@ -13,7 +13,8 @@ const introspection = fetch(
     body: JSON.stringify({ query: voyagerIntrospectionQuery }),
     credentials: 'omit',
   },
-).then((response) => response.json());
+);
+const introspection = await response.json();
 
 const reactRoot = ReactDOMClient.createRoot(document.getElementById('voyager'));
 reactRoot.render(

diff --git a/example/webpack/package.json b/example/webpack/package.json
@@ -15,7 +15,7 @@
     "@types/react-dom": "^18.0.11",
     "ts-loader": "5.3.3",
     "typescript": "4.7.2",
-    "webpack": "5.73.0",
+    "webpack": "5.83.0",
     "webpack-cli": "4.10.0",
     "webpack-dev-server": "4.9.1"
   }

diff --git a/example/webpack/tsconfig.json b/example/webpack/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "noImplicitAny": true,
     "noEmit": true,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "target": "es2021",
     "jsx": "react-jsx"

diff --git a/src/middleware/render-voyager-page.ts b/src/middleware/render-voyager-page.ts
@@ -37,18 +37,20 @@ export default function renderVoyagerPage(options: MiddlewareOptions) {
   <main id="voyager">
     <h1 style="text-align: center; color: #5d7e86;"> Loading... </h1>
   </main>
-  <script>
+  <script type="module">
     window.addEventListener('load', function(event) {
-      const query = GraphQLVoyager.voyagerIntrospectionQuery;
-      const introspection = fetch('${endpointUrl}', {
+      const response = fetch('${endpointUrl}', {
         method: 'post',
         headers: Object.assign({}, {
           'Accept': 'application/json',
           'Content-Type': 'application/json',
         }, ${headersJS}),
-        body: JSON.stringify({query}),
+        body: JSON.stringify({
+          query: GraphQLVoyager.voyagerIntrospectionQuery,
+        }),
         credentials: 'include',
-      }).then(response => response.json());
+      });
+      const introspection = await response.json();
 
       GraphQLVoyager.init(document.getElementById('voyager'), {
         introspection,