fix: url issue for path string for ui tools (playground, voyager, graphiql)

src/Ui.GraphiQL/Internal/GraphiQLPageModel.cs

@@ -24,6 +24,7 @@ public string Render() {
                 using (var streamReader = new StreamReader(manifestResourceStream)) {
                     var builder = new StringBuilder(streamReader.ReadToEnd());
                     builder.Replace("@Model.GraphQLEndPoint", this.settings.GraphQLEndPoint);
+                    builder.Replace("@Model.GraphiQLPath", this.settings.GraphiQLPath);
                     graphiQLCSHtml = builder.ToString();
                     return this.Render();
                 }

src/Ui.GraphiQL/Internal/graphiql.cshtml

@@ -1,4 +1,4 @@
-<!--
+<!--
  *  Copyright (c) Facebook, Inc.
  *  All rights reserved.
  *
@@ -96,25 +96,34 @@
 		function onEditOperationName(newOperationName) {
 			parameters.operationName = newOperationName;
 			updateURL();
-		}
+        }
 
-		function updateURL() {
-			var newSearch = '?' + Object.keys(parameters).filter(function (key) {
-				return Boolean(parameters[key]);
-			}).map(function (key) {
-				return encodeURIComponent(key) + '=' +
-					encodeURIComponent(parameters[key]);
-			}).join('&');
-			history.replaceState(null, null, newSearch);
-		}
+        function updateURL() {
+            var newSearch = '?' + Object.keys(parameters).filter(function (key) {
+                return Boolean(parameters[key]);
+            }).map(function (key) {
+                return encodeURIComponent(key) + '=' +
+                    encodeURIComponent(parameters[key]);
+            }).join('&');
+            history.replaceState(null, null, newSearch);
+        }
+
+        function stripGraphQLUiEndPointFromPathName(graphQlUiEndpoint) {
+            var currentPathName = window.location.pathname;
+            var regex = new RegExp(graphQlUiEndpoint + "\/*");
+            currentPathName = currentPathName.replace(regex, '');
+            return currentPathName;
+        }
+
+        var strippedCurrentPathName = stripGraphQLUiEndPointFromPathName("@Model.GraphiQLPath");
 
 		// Defines a GraphQL fetcher using the fetch API. You're not required to
 		// use fetch, and could instead implement graphQLFetcher however you like,
 		// as long as it returns a Promise or Observable.
-		function graphQLFetcher(graphQLParams) {
+        function graphQLFetcher(graphQLParams) {
 			// This example expects a GraphQL server at the path /graphql.
 			// Change this to point wherever you host your GraphQL server.
-			return fetch(window.location.protocol + "//" + window.location.host + '@Model.GraphQLEndPoint', {
+            return fetch(window.location.protocol + "//" + window.location.host + strippedCurrentPathName + '@Model.GraphQLEndPoint', {
 				method: 'post',
 				headers: {
 					'Accept': 'application/json',
@@ -134,7 +143,7 @@
 		}
 
 		// Enable Subscriptions via WebSocket
-		var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient((window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + "@Model.GraphQLEndPoint", { reconnect: true });
+		var subscriptionsClient = new window.SubscriptionsTransportWs.SubscriptionClient((window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + strippedCurrentPathName, { reconnect: true });
     	var subscriptionsFetcher = window.GraphiQLSubscriptionsFetcher.graphQLFetcher(subscriptionsClient, graphQLFetcher);
 
 		// Render <GraphiQL /> into the body.

src/Ui.Playground/Internal/PlaygroundPageModel.cs

@@ -24,6 +24,7 @@ public string Render() {
                 using (var streamReader = new StreamReader(manifestResourceStream)) {
                     var builder = new StringBuilder(streamReader.ReadToEnd());
                     builder.Replace("@Model.GraphQLEndPoint", this.settings.GraphQLEndPoint);
+                    builder.Replace("@Model.PlaygroundPath", this.settings.Path);
                     playgroundCSHtml = builder.ToString();
                     return this.Render();
                 }

src/Ui.Playground/Internal/playground.cshtml

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html>
 <head>
   <meta charset=utf-8 />
@@ -47,17 +47,25 @@
     </div>
   </div>
   <script>
-    window.addEventListener('load', function (event) {
-      GraphQLPlayground.init(document.getElementById('root'),
-        {
-          setTitle: true,
-          endpoint: window.location.protocol + "//" + window.location.host + "@Model.GraphQLEndPoint",
-          subscriptionEndpoint: (window.location.protocol === "http:" ? "ws://" : "wss://") + window.location.host + "@Model.GraphQLEndPoint",
-          settings: {
-            'tracing.hideTracingResponse': false
-          }
-        });
-    })
+      window.addEventListener('load', function (event) {
+          var strippedCurrentPathName = stripGraphQLUiEndPointFromPathName("@Model.PlaygroundPath");
+
+      function updateURL() {
+			var newSearch = '?' + Object.keys(parameters).filter(function (key) {
+				return Boolean(parameters[key]);
+			}).map(function (key) {
+				return encodeURIComponent(key) + '=' +
+					encodeURIComponent(parameters[key]);
+			}).join('&');
+			history.replaceState(null, null, newSearch);
+		}
+
+      function stripGraphQLUiEndPointFromPathName(graphQlUiEndpoint) {
+          var currentPathName = window.location.pathname;
+          var regex = new RegExp(graphQlUiEndpoint + "\/*");
+          currentPathName = currentPathName.replace(regex, '');
+          return currentPathName;
+      }
   </script>
 </body>
 </html>

src/Ui.Voyager/Internal/VoyagerPageModel.cs

@@ -31,6 +31,7 @@ public string Render()
                 {
                     var builder = new StringBuilder(streamReader.ReadToEnd());
                     builder.Replace("@Model.GraphQLEndPoint", this.settings.GraphQLEndPoint);
+                    builder.Replace("@Model.VoyagerPath", this.settings.Path);
                     voyagerCSHtml = builder.ToString();
                     return this.Render();
                 }

src/Ui.Voyager/Internal/voyager.cshtml

@@ -12,9 +12,10 @@
     <div id="voyager" style="height: 100%;">Loading...</div>
     <script>
         function introspectionProvider(introspectionQuery) {
+            var strippedCurrentPathName = stripGraphQLUiEndPointFromPathName("@Model.VoyagerPath");
             // This example expects a GraphQL server at the path /graphql.
             // Change this to point wherever you host your GraphQL server.
-            return fetch(window.location.protocol + "//" + window.location.host + "@Model.GraphQLEndPoint", {
+            return fetch(window.location.protocol + "//" + window.location.host + strippedCurrentPathName + "@Model.GraphQLEndPoint", {
                 method: 'post',
                 headers: {
                     'Accept': 'application/json',
@@ -33,6 +34,13 @@
             });
         }
 
+        function stripGraphQLUiEndPointFromPathName(graphQlUiEndpoint) {
+            var currentPathName = window.location.pathname;
+            var regex = new RegExp(graphQlUiEndpoint + "\/*");
+            currentPathName = currentPathName.replace(regex, '');
+            return currentPathName;
+        }
+
         // Render <Voyager />
         GraphQLVoyager.init(document.getElementById('voyager'), {
             introspection: introspectionProvider