chore: update graphiql 3.0.6 (#1855)

samuelAndalon · web-flow · commit 14787d8b7e43 · 2023-09-20T11:22:14.000-07:00
### 📝 Description removing plugins as they are incompatible with v3 -- non official plugins. ### 🔗 Related Issues #1854
diff --git a/servers/graphql-kotlin-server/src/main/resources/graphql-graphiql.html b/servers/graphql-kotlin-server/src/main/resources/graphql-graphiql.html
@@ -19,9 +19,7 @@
         }
     </style>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphiql@2.2.0/graphiql.min.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@0.1.15/dist/style.css" />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@graphiql/plugin-code-exporter@0.1.2/dist/style.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/graphiql@3.0.6/graphiql.min.css" />
 </head>
 
 <body>
@@ -33,14 +31,8 @@
 <script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js"
         integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
         crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/graphiql@2.2.0/graphiql.min.js"
-        integrity="sha512-FVCV2//UVo1qJ3Kg6kkHLe0Hg+IJhjrGa+aYHh8xD4KmwbbjthIzvaAcCJsQgA43+k+6u7HqORKXMyMt82Srfw=="
-        crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@0.1.15/dist/graphiql-plugin-explorer.umd.js"
-        integrity="sha512-VQtND1w103C6dmo8VAhbV2DlkFdXKtWpr2nVuYEdj2dFB0UIMYeSbpKDLAD7n+UP+b0Eg79Gn40Onju687384A=="
-        crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/@graphiql/plugin-code-exporter@0.1.2/dist/graphiql-plugin-code-exporter.umd.js"
-        integrity="sha512-bZesuT5p2QZ6cSlpgPxI83Db5G3Bw35RTKz+Z+kc6RUu4/PtPkNddzax0VWA6VoXvIwT8s4i5nQklZ+AGJQD2Q=="
+<script src="https://cdn.jsdelivr.net/npm/graphiql@3.0.6/graphiql.min.js"
+        integrity="sha512-J1qOEDzw11Yb9g9NS8iyR/Gq92y7k3fGnIxFBvQd9VRuS0iRbDkZo6S+k0SK+3UjQotW35LP/jSXgJfu2LsjHA=="
         crossorigin="anonymous"></script>
 
 <script>
@@ -52,76 +44,12 @@
         subscriptionUrl
     });
 
-    var fetchSnippet = {
-        language: 'JavaScript',
-        name: 'Fetch',
-        codeMirrorMode: 'jsx',
-        options: [],
-        generate: (generateOptions) => {
-            const operation = generateOptions.operationDataList[0];
-            const context = generateOptions.context;
-            const headers = context.headers.length !== 0 ? `headers: ${context.headers},\n  ` : '';
-            const variables = JSON.stringify(operation.variables);
-            return `
-const res = await fetch("${context.serverUrl}", {
-  method: 'POST',
-  ${headers}body: JSON.stringify({
-    operationName: "${operation.name}",
-    query: \`${operation.query.replaceAll("\n", "\\n")}\`,
-    variables: ${variables}
-  }),
-});
-
-const { errors, data } = await res.json();
-
-// Do something with the response
-console.log(data, errors);
-`;
-        }
-    };
-
-    var curlSnippet = {
-        language: 'Bash',
-        name: 'Curl',
-        codeMirrorMode: 'jsx',
-        options: [],
-        generate: (generateOptions) => {
-            const operation = generateOptions.operationDataList[0];
-            const context = generateOptions.context;
-            let headersObject;
-            try {
-                headersObject = JSON.parse(context.headers);
-            } catch (e) {
-                headersObject = {};
-            }
-            const headers = Object.entries(headersObject)
-                .reduce((acc, [headerName, headerValue]) => `${acc} -H '${headerName}: ${headerValue}' \\\n`, '');
-            const payload = JSON.stringify({
-                operationName: operation.name,
-                query: `${operation.query.replaceAll("\n", "\\n")}`,
-                variables: operation.variables
-            })
-            return `curl '${context.serverUrl}' \\\n${headers}--data-raw $'${payload}' --compressed`;
-        }
-    }
-
     function GraphiQLWithPlugins() {
         var [query, setQuery] = React.useState('');
         var [variables, setVariables] = React.useState('');
         var [headers, setHeaders] = React.useState('');
         var defaultHeaders = `{\n  "content-type": "application/json"\n}`;
 
-        var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
-            query,
-            onEdit: setQuery,
-        });
-        var exporterPlugin = GraphiQLPluginCodeExporter.useExporterPlugin({
-            query,
-            variables,
-            context: { serverUrl, headers },
-            snippets: [curlSnippet, fetchSnippet]
-        });
-
         return React.createElement(GraphiQL, {
             fetcher,
             query,
@@ -132,7 +60,8 @@
             onEditHeaders: setHeaders,
             defaultHeaders,
             defaultEditorToolsVisibility: true,
-            plugins: [explorerPlugin, exporterPlugin]
+            plugins: [],
+            shouldPersistHeaders: true
         });
     }
 
