Upgrade to GraphiQL 4 (#56)

spawnia · web-flow · commit 89ab9201ecd8 · 2025-05-07T17:52:30.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,13 @@ See [GitHub releases](https://github.com/mll-lab/laravel-graphiql/releases).
 
 ## Unreleased
 
+## v4.0.0
+
+### Changed
+
+- Upgrade to GraphiQL 4
+- Remove deprecated aliases for methods in `GraphiQLAsset` from `DownloadAssetsCommand`
+
 ## v3.3.3
 
 ### Fixed
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -6,45 +6,13 @@ This document provides guidance for upgrading between major versions.
 
 ### View
 
-The URLs for the GraphiQL assets are now provided by class `MLL\GraphiQL\GraphiQLAsset` instead of `MLL\GraphiQL\DownloadAssetsCommand`.
-If you have published the view, update it according to this diff:
-
-```diff
-@@ -1,6 +1,8 @@
- <!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"
-@@ -45,17 +47,17 @@
-             margin-left: var(--px-12);
-         }
-     </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="shortcut icon" href="{{ GraphiQLAsset::favicon() }}"/>
- </head>
-
- <body>
-
- <div id="graphiql">Loading...</div>
--<script src="{{ DownloadAssetsCommand::jsPath() }}"></script>
--<script src="{{ DownloadAssetsCommand::pluginExplorerPath() }}"></script>
-+<script src="{{ GraphiQLAsset::graphiQLJS() }}"></script>
-+<script src="{{ GraphiQLAsset::pluginExplorerJS() }}"></script>
- <script>
-     const fetcher = GraphiQL.createFetcher({
-         url: '{{ $url }}',
-```
+If you have published and/or customized the view, you need to republish or update it.
+See [views/index.blade.php](views/index.blade.php) for the latest version.
+
+Major changes:
+
+- The URLs for the GraphiQL assets are now provided by class `MLL\GraphiQL\GraphiQLAsset` instead of `MLL\GraphiQL\DownloadAssetsCommand`.
+- The setup now uses GraphiQL version 4.
 
 ## v1 to v2
 
diff --git a/src/DownloadAssetsCommand.php b/src/DownloadAssetsCommand.php
@@ -12,15 +12,16 @@ class DownloadAssetsCommand extends Command
 
     public function handle(): void
     {
-        $this->downloadFileFromCDN(GraphiQLAsset::REACT_JS_LOCAL_PATH, GraphiQLAsset::REACT_JS_SOURCE_URL);
-        $this->downloadFileFromCDN(GraphiQLAsset::REACT_DOM_JS_LOCAL_PATH, GraphiQLAsset::REACT_DOM_JS_SOURCE_URL);
-        $this->downloadFileFromCDN(GraphiQLAsset::GRAPHIQL_CSS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_CSS_SOURCE_URL);
-        $this->downloadFileFromCDN(GraphiQLAsset::GRAPHIQL_JS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_JS_SOURCE_URL);
-        $this->downloadFileFromCDN(GraphiQLAsset::PLUGIN_EXPLORER_JS_LOCAL_PATH, GraphiQLAsset::PLUGIN_EXPLORER_JS_SOURCE_URL);
-        $this->downloadFileFromCDN(GraphiQLAsset::FAVICON_LOCAL_PATH, GraphiQLAsset::FAVICON_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::REACT_JS_LOCAL_PATH, GraphiQLAsset::REACT_JS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::REACT_DOM_JS_LOCAL_PATH, GraphiQLAsset::REACT_DOM_JS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::GRAPHIQL_CSS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_CSS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::PLUGIN_EXPLORER_CSS_LOCAL_PATH, GraphiQLAsset::PLUGIN_EXPLORER_CSS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::GRAPHIQL_JS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_JS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::PLUGIN_EXPLORER_JS_LOCAL_PATH, GraphiQLAsset::PLUGIN_EXPLORER_JS_SOURCE_URL);
+        $this->downloadFile(GraphiQLAsset::FAVICON_LOCAL_PATH, GraphiQLAsset::FAVICON_SOURCE_URL);
     }
 
-    protected function downloadFileFromCDN(string $localPath, string $cdnPath): void
+    protected function downloadFile(string $localPath, string $sourceURL): void
     {
         $publicPath = GraphiQLAsset::publicPath($localPath);
 
@@ -30,48 +31,12 @@ protected function downloadFileFromCDN(string $localPath, string $cdnPath): void
             mkdir($directory, 0777, true);
         }
 
-        $contents = file_get_contents($cdnPath);
+        $contents = file_get_contents($sourceURL);
         if ($contents === false) {
             $error = error_get_last();
             throw new \ErrorException($error['message'] ?? 'An error occurred', 0, $error['type'] ?? 1);
         }
 
         file_put_contents($publicPath, $contents);
     }
-
-    /** @deprecated use GraphiQLAsset::reactJS, this alias will be removed in the next major version */
-    public static function reactPath(): string
-    {
-        return GraphiQLAsset::reactJS();
-    }
-
-    /** @deprecated use GraphiQLAsset::reactDOMJS, this alias will be removed in the next major version */
-    public static function reactDOMPath(): string
-    {
-        return GraphiQLAsset::reactDOMJS();
-    }
-
-    /** @deprecated use GraphiQLAsset::graphiQLJS, this alias will be removed in the next major version */
-    public static function jsPath(): string
-    {
-        return GraphiQLAsset::graphiQLJS();
-    }
-
-    /** @deprecated use GraphiQLAsset::pluginExplorerJS, this alias will be removed in the next major version */
-    public static function pluginExplorerPath(): string
-    {
-        return GraphiQLAsset::pluginExplorerJS();
-    }
-
-    /** @deprecated use GraphiQLAsset::graphiQLCSS, this alias will be removed in the next major version */
-    public static function cssPath(): string
-    {
-        return GraphiQLAsset::graphiQLCSS();
-    }
-
-    /** @deprecated use GraphiQLAsset::favicon, this alias will be removed in the next major version */
-    public static function faviconPath(): string
-    {
-        return GraphiQLAsset::favicon();
-    }
 }
diff --git a/src/GraphiQLAsset.php b/src/GraphiQLAsset.php
@@ -15,18 +15,20 @@ class GraphiQLAsset
     public const REACT_DOM_JS_LOCAL_PATH = 'vendor/graphiql/react-dom.production.min.js';
     public const REACT_DOM_JS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js';
 
-    public const GRAPHIQL_CSS_LOCAL_PATH = 'vendor/graphiql/graphiql.min.css';
-    public const GRAPHIQL_CSS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/graphiql/graphiql.min.css';
+    public const GRAPHIQL_CSS_LOCAL_PATH = 'vendor/graphiql/graphiql.css';
+    public const GRAPHIQL_CSS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/graphiql@4/dist/style.css';
+
+    public const PLUGIN_EXPLORER_CSS_LOCAL_PATH = 'vendor/graphiql/graphiql-plugin-explorer.css';
+    public const PLUGIN_EXPLORER_CSS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@4/dist/style.css';
 
     public const FAVICON_LOCAL_PATH = 'vendor/graphiql/favicon.ico';
     public const FAVICON_SOURCE_URL = 'https://raw.githubusercontent.com/graphql/graphql.github.io/source/public/favicon.ico';
 
-    public const GRAPHIQL_JS_LOCAL_PATH = 'vendor/graphiql/graphiql.min.js';
-    public const GRAPHIQL_JS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/graphiql/graphiql.min.js';
+    public const GRAPHIQL_JS_LOCAL_PATH = 'vendor/graphiql/graphiql.js';
+    public const GRAPHIQL_JS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/graphiql@4/dist/index.umd.js';
 
-    public const PLUGIN_EXPLORER_JS_LOCAL_PATH = 'vendor/graphiql/graphiql-plugin-explorer.umd.js';
-    /** Pinned because the latest version broke, see https://github.com/mll-lab/laravel-graphiql/issues/25. */
-    public const PLUGIN_EXPLORER_JS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@0.2.0/dist/index.umd.js';
+    public const PLUGIN_EXPLORER_JS_LOCAL_PATH = 'vendor/graphiql/graphiql-plugin-explorer.js';
+    public const PLUGIN_EXPLORER_JS_SOURCE_URL = 'https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@4/dist/index.umd.js';
 
     public static function reactJS(): string
     {
@@ -43,6 +45,11 @@ public static function graphiQLCSS(): string
         return self::availableURL(self::GRAPHIQL_CSS_LOCAL_PATH, self::GRAPHIQL_CSS_SOURCE_URL);
     }
 
+    public static function pluginExplorerCSS(): string
+    {
+        return self::availableURL(self::PLUGIN_EXPLORER_CSS_LOCAL_PATH, self::PLUGIN_EXPLORER_CSS_SOURCE_URL);
+    }
+
     public static function favicon(): string
     {
         return self::availableURL(self::FAVICON_LOCAL_PATH, self::FAVICON_SOURCE_URL);
@@ -73,10 +80,10 @@ public static function localURL(string $path): string
         return $url->asset($path);
     }
 
-    public static function availableURL(string $local, string $cdn): string
+    public static function availableURL(string $local, string $sourceURL): string
     {
         return file_exists(self::publicPath($local))
             ? self::localURL($local)
-            : $cdn;
+            : $sourceURL;
     }
 }
diff --git a/tests/DownloadAssetsCommandTest.php b/tests/DownloadAssetsCommandTest.php
@@ -10,7 +10,7 @@ protected function setUp(): void
     {
         parent::setUp();
 
-        foreach (self::paths() as [$localPath, $cdnPath]) {
+        foreach (self::localPathToSourceURL() as [$localPath, $cdnPath]) {
             $publicPath = GraphiQLAsset::publicPath($localPath);
             if (file_exists($publicPath)) {
                 unlink($publicPath);
@@ -20,26 +20,27 @@ protected function setUp(): void
 
     public function testSuccessfulDownload(): void
     {
-        foreach (self::paths() as [$localPath, $cdnPath]) {
+        foreach (self::localPathToSourceURL() as [$localPath, $sourceURL]) {
             $this->assertFileDoesNotExist(GraphiQLAsset::publicPath($localPath));
-            $this->assertSame($cdnPath, GraphiQLAsset::availableURL($localPath, $cdnPath));
+            $this->assertSame($sourceURL, GraphiQLAsset::availableURL($localPath, $sourceURL));
         }
 
         $this->artisan('graphiql:download-assets')
             ->assertOk();
 
-        foreach (self::paths() as [$localPath, $cdnPath]) {
+        foreach (self::localPathToSourceURL() as [$localPath, $sourceURL]) {
             $this->assertFileExists(GraphiQLAsset::publicPath($localPath));
-            $this->assertSame(GraphiQLAsset::localURL($localPath), GraphiQLAsset::availableURL($localPath, $cdnPath));
+            $this->assertSame(GraphiQLAsset::localURL($localPath), GraphiQLAsset::availableURL($localPath, $sourceURL));
         }
     }
 
     /** @return iterable<array{string, string}> */
-    private static function paths(): iterable
+    private static function localPathToSourceURL(): iterable
     {
         yield [GraphiQLAsset::REACT_JS_LOCAL_PATH, GraphiQLAsset::REACT_JS_SOURCE_URL];
         yield [GraphiQLAsset::REACT_DOM_JS_LOCAL_PATH, GraphiQLAsset::REACT_DOM_JS_SOURCE_URL];
         yield [GraphiQLAsset::GRAPHIQL_CSS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_CSS_SOURCE_URL];
+        yield [GraphiQLAsset::PLUGIN_EXPLORER_CSS_LOCAL_PATH, GraphiQLAsset::PLUGIN_EXPLORER_CSS_SOURCE_URL];
         yield [GraphiQLAsset::FAVICON_LOCAL_PATH, GraphiQLAsset::FAVICON_SOURCE_URL];
         yield [GraphiQLAsset::GRAPHIQL_JS_LOCAL_PATH, GraphiQLAsset::GRAPHIQL_JS_SOURCE_URL];
         yield [GraphiQLAsset::PLUGIN_EXPLORER_JS_LOCAL_PATH, GraphiQLAsset::PLUGIN_EXPLORER_JS_SOURCE_URL];
diff --git a/views/index.blade.php b/views/index.blade.php
@@ -1,82 +1,54 @@
-<!DOCTYPE html>
-<html lang="en">
+{{-- See https://github.com/graphql/graphiql/blob/main/examples/graphiql-cdn/index.html. --}}
 @php
 use MLL\GraphiQL\GraphiQLAsset;
 @endphp
+<!DOCTYPE html>
+<html lang="en">
 <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" />
     <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="{{ 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>
+<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
         });
