Update graphql-playground endpoint

server/src/main/kotlin/suwayomi/tachidesk/graphql/GraphQL.kt

@@ -7,16 +7,14 @@
 
 package suwayomi.tachidesk.graphql
 
-import io.javalin.apibuilder.ApiBuilder.get
-import io.javalin.apibuilder.ApiBuilder.post
+import io.javalin.apibuilder.ApiBuilder.*
 import suwayomi.tachidesk.graphql.controller.GraphQLController
 
 object GraphQL {
     fun defineEndpoints() {
         post("graphql", GraphQLController.execute)
-        get("graphql") { ctx ->
-            val html = javaClass.getResource("/graphql.html")?.readText()
-            ctx.html(html ?: "Could not load playground")
-        }
+
+        // graphql playground
+        get("graphql", GraphQLController::playground)
     }
 }

server/src/main/kotlin/suwayomi/tachidesk/graphql/controller/GraphQLController.kt

@@ -8,6 +8,7 @@
 package suwayomi.tachidesk.graphql.controller
 
 import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
+import io.javalin.http.Context
 import io.javalin.http.HttpCode
 import suwayomi.tachidesk.graphql.impl.getGraphQLServer
 import suwayomi.tachidesk.server.JavalinSetup.future
@@ -38,4 +39,19 @@ object GraphQLController {
             json<Any>(HttpCode.OK)
         }
     )
+
+    fun playground(ctx: Context) {
+        val playgroundHtml = javaClass.getResource("/graphql-playground.html")
+
+        val body = playgroundHtml.openStream().bufferedReader().use { reader ->
+            val graphQLEndpoint = "graphql"
+            val subscriptionsEndpoint = "graphql"
+
+            reader.readText()
+                .replace("\${graphQLEndpoint}", graphQLEndpoint)
+                .replace("\${subscriptionsEndpoint}", subscriptionsEndpoint)
+        }
+
+        ctx.html(body ?: "Could not load playground")
+    }
 }

server/src/main/resources/graphql-playground.html

@@ -50,9 +50,11 @@
 </div>
 <script>window.addEventListener('load', function (event) {
     GraphQLPlayground.init(document.getElementById('root'), {
-        // options as 'endpoint' belong here
+        settings: {'request.credentials': 'same-origin'},
+        endpoint: '/${graphQLEndpoint}',
+        subscriptionEndpoint: '/${subscriptionsEndpoint}'
     })
 })</script>
 </body>
 
-</html>
+</html>