Allow configuring multiple routes that point to different endpoints

CHANGELOG.md

@@ -9,6 +9,10 @@ See [GitHub releases](https://github.com/mll-lab/laravel-graphiql/releases).
 
 ## Unreleased
 
+### Added
+
+- Introduce multi-route support
+
 ## v1.2.2
 
 ### Fixed

README.md

@@ -63,8 +63,8 @@ Add extra settings in the call to `React.createElement(GraphiQL, {})` in the pub
 ```js
 React.createElement(GraphiQL, {
     fetcher: GraphiQL.createFetcher({
-        url: '{{ url(config('graphiql.endpoint')) }}',
-        subscriptionUrl: '{{ config('graphiql.subscription-endpoint') }}',
+        url: '{{ filter_var($endpoint = $routeConfig['endpoint'] ?? null, FILTER_VALIDATE_URL) ? url($endpoint) : $endpoint }}',
+        subscriptionUrl: '{{ $routeConfig['subscription-endpoint'] ?? null }}',
     }),
     // See https://github.com/graphql/graphiql/tree/main/packages/graphiql#props for available settings
 })
@@ -84,8 +84,8 @@ Modify the GraphQL UI config:
 ```diff
 React.createElement(GraphiQL, {
     fetcher: GraphiQL.createFetcher({
-        url: '{{ url(config('graphiql.endpoint')) }}',
-        subscriptionUrl: '{{ config('graphiql.subscription-endpoint') }}',
+        url: '{{ filter_var($endpoint = $routeConfig['endpoint'] ?? null, FILTER_VALIDATE_URL) ? url($endpoint) : $endpoint }}',
+        subscriptionUrl: '{{ $routeConfig['subscription-endpoint'] ?? null }}',
     }),
 +   defaultHeaders: JSON.stringify({
 +       'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
@@ -97,10 +97,11 @@ Make sure your route includes the `web` middleware group in `config/graphiql.php
 
 ```diff
     'route' => [
-        'uri' => '/graphiql',
-        'name' => 'graphiql',
-+       'middleware' => ['web']
-    ]
+        '/graphiql' => [
+            'name' => 'graphiql',
++           'middleware' => ['web']
+        ],
+    ],
 ```
 
 ## Local assets

src/GraphiQLController.php

@@ -2,12 +2,22 @@
 
 namespace MLL\GraphiQL;
 
+use Illuminate\Config\Repository as ConfigRepository;
 use Illuminate\Contracts\View\View;
+use Illuminate\Http\Request;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 class GraphiQLController
 {
-    public function __invoke(): View
+    public function __invoke(ConfigRepository $config, Request $request): View
     {
-        return view('graphiql::index');
+        $path = "/{$request->path()}";
+
+        $routeConfig = $config->get("graphiql.routes.{$path}");
+        if (null === $routeConfig) {
+            throw new NotFoundHttpException("No graphiql route config found for '{$path}'.");
+        }
+
+        return view('graphiql::index', ['routeConfig' => $routeConfig]);
     }
 }

src/graphiql.php

@@ -3,48 +3,50 @@
 return [
     /*
     |--------------------------------------------------------------------------
-    | Route configuration
+    | Routes configuration
     |--------------------------------------------------------------------------
     |
-    | Set the URI at which the GraphiQL UI can be viewed,
+    | Set the key as URI at which the GraphiQL UI can be viewed,
     | and add any additional configuration for the route.
     |
-    */
-
-    'route' => [
-        'uri' => '/graphiql',
-        'name' => 'graphiql',
-        // 'middleware' => ['web']
-        // 'prefix' => '',
-        // 'domain' => 'graphql.' . env('APP_DOMAIN', 'localhost'),
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Default GraphQL endpoint
-    |--------------------------------------------------------------------------
-    |
-    | The default endpoint that the GraphiQL UI is set to.
-    | It assumes you are running GraphQL on the same domain
-    | as GraphiQL, but can be set to any URL.
+    | You can add multiple routes pointing to different GraphQL endpoints.
     |
     */
-
-    'endpoint' => '/graphql',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Subscription endpoint
-    |--------------------------------------------------------------------------
-    |
-    | The default subscription endpoint the GraphiQL UI uses to connect to.
-    | Tries to connect to the `endpoint` value if `null` as ws://{{endpoint}}
-    |
-    | Example: `ws://your-endpoint` or `wss://your-endpoint`
-    |
-    */
-
-    'subscription-endpoint' => env('GRAPHIQL_SUBSCRIPTION_ENDPOINT', null),
+    'routes' => [
+        '/graphiql' => [
+            'name' => 'graphiql',
+            // 'middleware' => ['web']
+            // 'prefix' => '',
+            // 'domain' => 'graphql.' . env('APP_DOMAIN', 'localhost'),
+
+            /*
+            |--------------------------------------------------------------------------
+            | Default GraphQL endpoint
+            |--------------------------------------------------------------------------
+            |
+            | The default endpoint that the GraphiQL UI is set to.
+            | It assumes you are running GraphQL on the same domain
+            | as GraphiQL, but can be set to any URL.
+            |
+            */
+
+            'endpoint' => '/graphql',
+
+            /*
+            |--------------------------------------------------------------------------
+            | Subscription endpoint
+            |--------------------------------------------------------------------------
+            |
+            | The default subscription endpoint the GraphiQL UI uses to connect to.
+            | Tries to connect to the `endpoint` value if `null` as ws://{{endpoint}}
+            |
+            | Example: `ws://your-endpoint` or `wss://your-endpoint`
+            |
+            */
+
+            'subscription-endpoint' => env('GRAPHIQL_SUBSCRIPTION_ENDPOINT', null),
+        ],
+    ],
 
     /*
     |--------------------------------------------------------------------------

src/routes.php

@@ -9,11 +9,13 @@
 $config = $app->make(ConfigRepository::class);
 assert($config instanceof ConfigRepository);
 
-$routeConfig = $config->get('graphiql.route');
-if (is_array($routeConfig)) {
-    /** @var \Illuminate\Contracts\Routing\Registrar|\Laravel\Lumen\Routing\Router $router */
-    $router = $app->make('router');
+/** @var \Illuminate\Contracts\Routing\Registrar|\Laravel\Lumen\Routing\Router $router */
+$router = $app->make('router');
 
+/** @var array<string, array{name?: string, middleware?: string, prefix?: string, domain?: string}> $routesConfig */
+$routesConfig = $config->get('graphiql.routes', []);
+
+foreach ($routesConfig as $routeUri => $routeConfig) {
     $actions = [
         'as' => $routeConfig['name'] ?? 'graphiql',
         'uses' => GraphiQLController::class,
@@ -31,8 +33,5 @@
         $actions['domain'] = $routeConfig['domain'];
     }
 
-    $router->get(
-        $routeConfig['uri'] ?? '/graphiql',
-        $actions
-    );
+    $router->get($routeUri, $actions);
 }

views/index.blade.php

@@ -31,8 +31,8 @@
 <script src="{{ \MLL\GraphiQL\DownloadAssetsCommand::explorerPluginPath() }}"></script>
 <script>
     const fetcher = GraphiQL.createFetcher({
-        url: '{{ filter_var($endpoint = config('graphiql.endpoint'), FILTER_VALIDATE_URL) ? url($endpoint) : $endpoint }}',
-        subscriptionUrl: '{{ config('graphiql.subscription-endpoint') }}',
+        url: '{{ filter_var($endpoint = $routeConfig['endpoint'] ?? null, FILTER_VALIDATE_URL) ? url($endpoint) : $endpoint }}',
+        subscriptionUrl: '{{ $routeConfig['subscription-endpoint'] ?? null }}',
     });
 
     function GraphiQLWithExplorer() {