Replace GraphiQL with GraphQL Playground

rasmusjp · rasmusjp · commit abe85c637a72 · 2019-08-01T21:33:46.000+02:00
diff --git a/src/Our.Umbraco.GraphQL/CompositionExtensions.cs b/src/Our.Umbraco.GraphQL/CompositionExtensions.cs
@@ -19,6 +19,7 @@ public static void RegisterGraphQLServices(this Composition composition)
             composition.Register<IDocumentExecuter, DocumentExecuter>(Lifetime.Singleton);
             composition.Register<IDocumentWriter, DocumentWriter>(Lifetime.Singleton);
 
+            composition.Register<GraphQLPlaygroundMiddleware>(Lifetime.Singleton);
             composition.Register<GraphQLRequestParserMiddleware>(Lifetime.Singleton);
             composition.Register<GraphQLMiddleware>(Lifetime.Singleton);
 
diff --git a/src/Our.Umbraco.GraphQL/Resources/graphiql.html b/src/Our.Umbraco.GraphQL/Resources/graphiql.html
diff --git a/src/Our.Umbraco.GraphQL/Resources/graphiql.js b/src/Our.Umbraco.GraphQL/Resources/graphiql.js
diff --git a/src/Our.Umbraco.GraphQL/Resources/playground.html b/src/Our.Umbraco.GraphQL/Resources/playground.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<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">
+  <title>GraphQL Playground</title>
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/css/index.css" />
+  <link rel="shortcut icon" href="//cdn.jsdelivr.net/npm/graphql-playground-react/build/favicon.png" />
+  <script src="//cdn.jsdelivr.net/npm/graphql-playground-react/build/static/js/middleware.js"></script>
+</head>
+
+<body>
+  <div id="root">
+    <style>
+      body {
+        background-color: rgb(23, 42, 58);
+        font-family: Open Sans, sans-serif;
+        height: 90vh;
+      }
+      #root {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .loading {
+        font-size: 32px;
+        font-weight: 200;
+        color: rgba(255, 255, 255, .6);
+        margin-left: 20px;
+      }
+      img {
+        width: 78px;
+        height: 78px;
+      }
+      .title {
+        font-weight: 400;
+      }
+    </style>
+    <img src='//cdn.jsdelivr.net/npm/graphql-playground-react/build/logo.png' alt=''>
+    <div class="loading"> Loading
+      <span class="title">GraphQL Playground</span>
+    </div>
+  </div>
+  <script>window.addEventListener('load', function (event) {
+      GraphQLPlayground.init(document.getElementById('root'), {
+        // options as 'endpoint' belong here
+      })
+    })</script>
+</body>
+
+</html>
diff --git a/src/Our.Umbraco.GraphQL/Web/AppBuilderExtensions.cs b/src/Our.Umbraco.GraphQL/Web/AppBuilderExtensions.cs
@@ -18,36 +18,18 @@ public static IAppBuilder UseUmbracoGraphQL(this IAppBuilder app, string rootPat
 
         public static IAppBuilder UseUmbracoGraphQL(this IAppBuilder app, string rootPath, IFactory factory, GraphQLServerOptions options)
         {
-            string graphiQLPath = $"/{rootPath}/graphiql";
             string graphQLPath = $"/{rootPath}/graphql";
 
-            return app.Map(graphiQLPath, subApp =>
-                {
-                    string html;
-
-                    using (var stream = typeof(AppBuilderExtensions).Assembly.GetManifestResourceStream("Our.Umbraco.GraphQL.Resources.graphiql.html"))
-                    {
-                        using (var reader = new StreamReader(stream))
-                        {
-                            html = reader.ReadToEnd().Replace("${endpointURL}", graphQLPath);
-                        }
-                    }
-                    subApp.Run(async ctx =>
-                    {
-                        ctx.Response.ContentType = "text/html";
-                        await ctx.Response.WriteAsync(html);
-                    });
-                })
-                .Map(graphQLPath, subApp =>
+            return app.Map(graphQLPath, subApp =>
                 {
                     var corsOptions = new CorsOptions
                     {
                         PolicyProvider = options.CorsPolicyProvder
                     };
 
-
                     subApp.UseCors(corsOptions)
                         .Use<FactoryMiddleware>(factory)
+                        .Use((ctx, next) => ctx.Get<IFactory>("umbraco:factory").GetInstance<GraphQLPlaygroundMiddleware>().Invoke(ctx, next))
                         .Use((ctx, next) => ctx.Get<IFactory>("umbraco:factory").GetInstance<GraphQLRequestParserMiddleware>().Invoke(ctx, next))
                         .Use((ctx, next) => ctx.Get<IFactory>("umbraco:factory").GetInstance<GraphQLMiddleware>().Invoke(ctx, options));
                 });
diff --git a/src/Our.Umbraco.GraphQL/Web/Middleware/GraphQLPlaygroundMiddleware.cs b/src/Our.Umbraco.GraphQL/Web/Middleware/GraphQLPlaygroundMiddleware.cs
@@ -0,0 +1,36 @@
+using Microsoft.Owin;
+using System;
+using System.IO;
+using System.Threading.Tasks;
+
+namespace Our.Umbraco.GraphQL.Web.Middleware
+{
+    internal class GraphQLPlaygroundMiddleware
+    {
+        private readonly string _html;
+
+        public GraphQLPlaygroundMiddleware()
+        {
+            using (var stream = typeof(AppBuilderExtensions).Assembly.GetManifestResourceStream("Our.Umbraco.GraphQL.Resources.playground.html"))
+            {
+                using (var reader = new StreamReader(stream))
+                {
+                    _html = reader.ReadToEnd(); //.Replace("${endpointURL}", graphQLPath);
+                }
+            }
+        }
+
+        public async Task Invoke(IOwinContext context, Func<Task> next)
+        {
+            if (context.Request.Method == "GET")
+            {
+                context.Response.ContentType = "text/html";
+                await context.Response.WriteAsync(_html);
+            }
+            else
+            {
+                await next();
+            }
+        }
+    }
+}
