Update laravel-graphiql to 4.0.1 (#2876)

williamjallen · web-flow · commit 42a7ea4e5d03 · 2025-05-08T18:46:37.000Z
The library we use to provide GraphiQL [recently broke](mll-lab/laravel-graphiql#53) due to an unpinned upstream dependency. This PR fixes the issue by updating `laravel-graphiql` to the newest version which pins dependencies appropriately. I also enabled asset downloading to prevent this issue from occurring in the future if the CDN ever goes down again.
diff --git a/.eslintignore b/.eslintignore
@@ -2,6 +2,7 @@ vendor/*
 _build/*
 cypress_cache/*
 public/assets/*
+public/vendor/*
 resources/js/angular/ui.tabs.js
 resources/js/angular/tabNavigation.js
 resources/js/angular/services/renderTimer.js
diff --git a/composer.json b/composer.json
@@ -33,7 +33,7 @@
     "laravel/ui": "4.6.1",
     "lcobucci/jwt": "5.5.0",
     "league/flysystem-aws-s3-v3": "^3.29",
-    "mll-lab/laravel-graphiql": "3.3.2",
+    "mll-lab/laravel-graphiql": "4.0.1",
     "nuwave/lighthouse": "6.54.0",
     "pear/archive_tar": "1.5.0",
     "php-di/php-di": "7.0.10",
diff --git a/composer.lock b/composer.lock
diff --git a/install.sh b/install.sh
@@ -63,6 +63,9 @@ else
     fi
 fi
 
+echo "Downloading GraphiQL assets..."
+php artisan graphiql:download-assets
+
 echo "Waiting for database to come online..."
 until php artisan db:monitor ; do sleep 1; done
 
diff --git a/resources/views/vendor/graphiql/index.blade.php b/resources/views/vendor/graphiql/index.blade.php
@@ -1,81 +1,58 @@
 <!DOCTYPE html>
 <html lang="en">
-@php use MLL\GraphiQL\DownloadAssetsCommand; @endphp
+@php use MLL\GraphiQL\GraphiQLAsset; @endphp
 <head>
-    <meta charset=utf-8/>
-    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <title>GraphiQL</title>
     <style>
         body {
-            height: 100%;
             margin: 0;
-            width: 100%;
-            overflow: hidden;
+            overflow: hidden; /* in Firefox */
         }
 
         #graphiql {
-            height: 100vh;
-        }
-
-        /* Make the explorer feel more integrated */
-        .docExplorerWrap {
-            overflow: auto !important;
-            width: 100% !important;
-            height: auto !important;
-        }
-
-        .doc-explorer-title-bar {
-            font-weight: var(--font-weight-medium);
-            font-size: var(--font-size-h2);
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .doc-explorer-rhs {
-            display: none;
-        }
-
-        .doc-explorer-contents {
-            margin: var(--px-16) 0 0;
+            height: 100dvh;
         }
 
-        .graphiql-explorer-actions select {
-            margin-left: var(--px-12);
+        #graphiql-loading {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 4rem;
         }
     </style>
-    <script src="{{ DownloadAssetsCommand::reactPath() }}"></script>
-    <script src="{{ DownloadAssetsCommand::reactDOMPath() }}"></script>
-    <link rel="stylesheet" href="{{ DownloadAssetsCommand::cssPath() }}"/>
-    <link rel="shortcut icon" href="{{ DownloadAssetsCommand::faviconPath() }}"/>
+    <script src="{{ GraphiQLAsset::reactJS() }}"></script>
+    <script src="{{ GraphiQLAsset::reactDOMJS() }}"></script>
+    <link rel="stylesheet" href="{{ GraphiQLAsset::graphiQLCSS() }}"/>
+    <link rel="stylesheet" href="{{ GraphiQLAsset::pluginExplorerCSS() }}"/>
+    <link rel="shortcut icon" href="{{ GraphiQLAsset::favicon() }}"/>
 </head>
 
 <body>
 
-<div id="graphiql">Loading...</div>
-<script src="{{ DownloadAssetsCommand::jsPath() }}"></script>
-<script src="{{ DownloadAssetsCommand::pluginExplorerPath() }}"></script>
+<div id="graphiql">
+    <div id="graphiql-loading">Loading…</div>
+</div>
+
+<script src="{{ GraphiQLAsset::graphiQLJS() }}"></script>
+<script src="{{ GraphiQLAsset::pluginExplorerJS() }}"></script>
 <script>
     const fetcher = GraphiQL.createFetcher({
         url: '{{ $url }}',
         subscriptionUrl: '{{ $subscriptionUrl }}',
     });
+    const explorer = GraphiQLPluginExplorer.explorerPlugin();
 
     function GraphiQLWithExplorer() {
-        const [query, setQuery] = React.useState('');
-
         return React.createElement(GraphiQL, {
             fetcher,
-            query,
-            onEditQuery: setQuery,
-            defaultEditorToolsVisibility: true,
             plugins: [
-                GraphiQLPluginExplorer.useExplorerPlugin({
-                    query,
-                    onEdit: setQuery,
-                }),
+                explorer,
             ],
+            // See https://github.com/graphql/graphiql/tree/main/packages/graphiql#props for available settings
         });
     }
 
