Merge pull request #36 from TomHAnderson/feature/graphiql

Added graphiql

Dockerfile

@@ -25,6 +25,9 @@ RUN apt-get update && apt-get install --yes \
     libzip-dev \
     redis
 
+RUN apt-get install --yes nodejs
+RUN apt-get install --yes npm
+
 # Clear cache
 RUN apt-get clean && rm -rf /var/lib/apt/lists/*
 
@@ -50,6 +53,11 @@ COPY .docker/config/000-default.conf /etc/apache2/sites-available/000-default.co
 RUN rm /etc/apache2/sites-enabled/000-default.conf
 RUN ln -s /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-enabled/000-default.conf
 
+# Node and Magidoc
+RUN npm install -g pnpm
+RUN SHELL=/bin/bash pnpm setup
+RUN SHELL=/bin/bash PNPM_HOME=/usr/bin pnpm add --global @magidoc/cli@latest
+
 # PHP
 COPY .docker/config/php.ini /usr/local/etc/php/php.ini
 

composer.json

@@ -16,7 +16,8 @@
         "laravel-doctrine/orm": "^1.8",
         "laravel/framework": "^9.19",
         "laravel/sanctum": "^3.0",
-        "laravel/tinker": "^2.7"
+        "laravel/tinker": "^2.7",
+        "mll-lab/laravel-graphiql": "^3.2"
     },
     "require-dev": {
         "doctrine/coding-standard": "^12.0",

config/graphiql.php

@@ -0,0 +1,64 @@
+<?php declare(strict_types=1);
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Routes configuration
+    |--------------------------------------------------------------------------
+    |
+    | Set the key as URI at which the GraphiQL UI can be viewed,
+    | and add any additional configuration for the route.
+    |
+    | You can add multiple routes pointing to different GraphQL endpoints.
+    |
+    */
+
+    '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' => '/',
+
+            /*
+            |--------------------------------------------------------------------------
+            | 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),
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Control GraphiQL availability
+    |--------------------------------------------------------------------------
+    |
+    | Control if the GraphiQL UI is accessible at all.
+    | This allows you to disable it in certain environments,
+    | for example you might not want it active in production.
+    |
+    */
+
+    'enabled' => env('GRAPHIQL_ENABLED', true),
+];

magidoc.mjs

@@ -1,7 +1,7 @@
 export default {
   introspection: {
     type: 'url',
-    url: 'http://localhost',
+    url: 'http://localhost:8080',
   },
   website: {
     template: 'carbon-multi-page',
@@ -22,7 +22,69 @@ This is the graph database for \`https://lcdb.org\`.
 
 You are free to use this database for your own purposes.
 
-The endpoint is a POST to \`https://graphql.lcdb.org\`
+You may explore the GraphQL with [graphiql](https://graphql.lcdb.org/graphiql) or POST to \`https://graphql.lcdb.org\`
+          `,
+        },
+        {
+          title: 'Example Queries',
+          content: `
+Example Queries
+===============
+
+Fetch performances with artist name and sources
+-----------------------------------------------
+
+\`\`\`graphql
+query MyQuery {
+  performances {
+    edges {
+      node {
+        artist {
+          name
+        }
+        date
+        year
+        venue
+        city
+        state
+        sources {
+          edges {
+            node {
+              id
+              comments
+              createdAt
+            }
+          }
+        }
+      }
+    }
+  }
+}
+\`\`\`
+
+
+Fetch a single source
+----------------------
+
+\`\`\`graphql
+query MyQuery {
+  source(id: 211) {
+    comments
+    textdoc
+    id
+    archiveIdentifier
+    performance {
+      date
+      year
+      artist {
+        name
+      }
+    }
+  }
+}
+\`\`\`
+
+
           `,
         }
       ],