fix(gate): update graphql playground deps (#1012)

luckasRanarison · web-flow · commit f29f2025664a · 2025-05-08T08:08:59.000+03:00
&lt;!--
Pull requests are squashed and merged using:
- their title as the commit message
- their description as the commit body

Having a good title and description is important for the users to get
readable changelog.
--&gt;

&lt;!-- 1. Explain WHAT the change is about --&gt;

- Fixes broken graphQL playground by updating the react version and
pinning graphiql.

&lt;!-- 3. Explain HOW users should update their code --&gt;

#### Migration notes

---

- [ ] The change comes with new or modified tests
- [ ] Hard-to-understand functions have explanatory comments
- [ ] End-user documentation is updated to reflect the change


&lt;!-- This is an auto-generated comment: release notes by coderabbit.ai
--&gt;
## Summary by CodeRabbit

- **New Features**
- Upgraded the GraphiQL playground to use the latest React and GraphiQL
versions for improved performance and compatibility.
&lt;!-- end of auto-generated comment: release notes by coderabbit.ai --&gt;
diff --git a/src/typegate/src/services/playground_service.ts b/src/typegate/src/services/playground_service.ts
@@ -20,9 +20,9 @@ export const handlePlaygroundGraphQL = (
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
-        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
-        <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/graphiql@4/graphiql.min.css" />
         <style>
           body {
             margin: 0;
@@ -76,7 +76,7 @@ export const handlePlaygroundGraphQL = (
       <body>
         <div id="graphiql">Loading...</div>
         <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
-        <script src="https://unpkg.com/graphiql/graphiql.min.js" type="application/javascript"></script>
+        <script src="https://unpkg.com/graphiql@4/graphiql.min.js" type="application/javascript"></script>
         <script data-plugins="transform-es2015-modules-umd" type="text/babel">
           const fetcher = GraphiQL.createFetcher({
             url: "${url}"
@@ -100,7 +100,7 @@ export const handlePlaygroundGraphQL = (
               </GraphiQL.Logo>
             </GraphiQL>
           );
-          ReactDOM.render(app, document.getElementById('graphiql'));
+          ReactDOM.createRoot(document.getElementById('graphiql')).render(app);
         </script>
       </body>
     </html>
