Update GraphiQL from 5.0.6 to 5.1.1 version (#1338)

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Kai Ren <tyranron@gmail.com>

Author: dependabot[bot]

juniper/CHANGELOG.md

@@ -130,7 +130,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
 
 ### Changed
 
-- Upgraded [GraphiQL] to [5.0.6 version](https://github.com/graphql/graphiql/blob/graphiql%405.0.6/packages/graphiql/CHANGELOG.md#506). ([#1337])
+- Upgraded [GraphiQL] to [5.1.1 version](https://github.com/graphql/graphiql/blob/graphiql%405.1.1/packages/graphiql/CHANGELOG.md#511). ([#1338])
 - Lifted `Sized` requirement from `ToInputValue` conversion trait. ([#1330]) 
 
 ### Fixed
@@ -156,7 +156,7 @@ All user visible changes to `juniper` crate will be documented in this file. Thi
 [#1327]: /../../pull/1327
 [#1329]: /../../pull/1329
 [#1330]: /../../pull/1330
-[#1337]: /../../pull/1337
+[#1338]: /../../pull/1338
 [1b1fc618]: /../../commit/1b1fc61879ffdd640d741e187dc20678bf7ab295
 [20609366]: /../../commit/2060936635609b0186d46d8fbd06eb30fce660e3
 [4b14c015]: /../../commit/4b14c015018d31cb6df848efdee24d96416b76d9

juniper/package.json

@@ -4,7 +4,7 @@
     "postinstall": "make graphiql graphql-playground"
   },
   "dependencies": {
-    "graphiql": "5.0.6",
+    "graphiql": "5.1.1",
     "graphql-playground-react": "1.7.28"
   }
 }

juniper/src/http/graphiql.html

@@ -28,56 +28,44 @@
         font-size: 4rem;
       }
     </style>
-    <link rel="stylesheet" href="https://esm.sh/graphiql@5.0.6/dist/style.css" />
+    <link rel="stylesheet" href="https://esm.sh/graphiql@5.1.1/dist/style.css" />
     <link
       rel="stylesheet"
-      href="https://esm.sh/@graphiql/plugin-explorer@5.0.0/dist/style.css"
+      href="https://esm.sh/@graphiql/plugin-explorer@5.1.1/dist/style.css"
     />
-    <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
+    <!--
+     * Note:
+     * The ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file.
+     * `@emotion/is-prop-valid` is a shim to remove the console error ` module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126
+    -->
     <script type="importmap">
       {
         "imports": {
           "react": "https://esm.sh/react@19.1.0",
-          "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
+          "react/": "https://esm.sh/react@19.1.0/",
 
           "react-dom": "https://esm.sh/react-dom@19.1.0",
-          "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
+          "react-dom/": "https://esm.sh/react-dom@19.1.0/",
 
-          "graphiql": "https://esm.sh/graphiql@5.0.6?standalone&external=react,react-dom,@graphiql/react,graphql",
-          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.0.0?standalone&external=react,@graphiql/react,graphql",
-          "@graphiql/react": "https://esm.sh/@graphiql/react@0.35.6?standalone&external=react,react-dom,graphql",
+          "graphiql": "https://esm.sh/graphiql@5.1.1?standalone&external=react,react-dom,@graphiql/react,graphql",
+          "graphiql/": "https://esm.sh/graphiql@5.1.1/",
+          "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer@5.1.1?standalone&external=react,@graphiql/react,graphql",
+          "@graphiql/react": "https://esm.sh/@graphiql/react@0.37.0?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
 
           "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit@0.11.3?standalone&external=graphql",
-          "graphql": "https://esm.sh/graphql@16.11.0"
+          "graphql": "https://esm.sh/graphql@16.11.0",
+          "@emotion/is-prop-valid": "data:text/javascript,"
         }
       }
     </script>
     <script type="module">
 <!-- inject -->
-      // Import React and ReactDOM
       import React from 'react';
       import ReactDOM from 'react-dom/client';
-      // Import GraphiQL and the Explorer plugin
       import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
       import { createGraphiQLFetcher } from '@graphiql/toolkit';
       import { explorerPlugin } from '@graphiql/plugin-explorer';
-
-      import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
-      import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
-      import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
-
-      globalThis.MonacoEnvironment = {
-        getWorker(_workerId, label) {
-          console.info('MonacoEnvironment.getWorker', { label });
-          switch (label) {
-            case 'json':
-              return createJSONWorker();
-            case 'graphql':
-              return createGraphQLWorker();
-          }
-          return createEditorWorker();
-        },
-      };
+      import 'graphiql/setup-workers/esm.sh';
 
       const fetcher = createGraphiQLFetcher({
         url: JUNIPER_URL,