Make it possible to pass UI headers (#2793)

99designs · Sep 14, 2023 · 625ca2e · 625ca2e
1 parent fceb331
commit 625ca2e
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/graphql/playground/playground.go b/graphql/playground/playground.go
@@ -58,18 +58,24 @@ var page = template.Must(template.New("graphiql").Parse(`<!DOCTYPE html>
       const wsProto = location.protocol == 'https:' ? 'wss:' : 'ws:';
       const subscriptionUrl = wsProto + '//' + location.host + {{.endpoint}};
 {{- end}}
-{{- if .headers}}
-      const headers = {{.headers}};
+{{- if .fetcherHeaders}}
+      const fetcherHeaders = {{.fetcherHeaders}};
 {{- else}}
-      const headers = undefined;
+      const fetcherHeaders = undefined;
+{{- end}}
+{{- if .uiHeaders}}
+      const uiHeaders = {{.uiHeaders}};
+{{- else}}
+      const uiHeaders = undefined;
 {{- end}}
 
-      const fetcher = GraphiQL.createFetcher({ url, subscriptionUrl, headers });
+      const fetcher = GraphiQL.createFetcher({ url, subscriptionUrl, headers: fetcherHeaders });
       ReactDOM.render(
         React.createElement(GraphiQL, {
           fetcher: fetcher,
           isHeadersEditorEnabled: true,
-          shouldPersistHeaders: true
+          shouldPersistHeaders: true,
+		  headers: JSON.stringify(uiHeaders, null, 2)
         }),
         document.getElementById('graphiql'),
       );
@@ -80,16 +86,20 @@ var page = template.Must(template.New("graphiql").Parse(`<!DOCTYPE html>
 
 // Handler responsible for setting up the playground
 func Handler(title string, endpoint string) http.HandlerFunc {
-	return HandlerWithHeaders(title, endpoint, nil)
+	return HandlerWithHeaders(title, endpoint, nil, nil)
 }
 
-func HandlerWithHeaders(title string, endpoint string, headers map[string]string) http.HandlerFunc {
+// HandlerWithHeaders sets up the playground.
+// fetcherHeaders are used by the playground's fetcher instance and will not be visible in the UI.
+// uiHeaders are default headers that will show up in the UI headers editor.
+func HandlerWithHeaders(title string, endpoint string, fetcherHeaders map[string]string, uiHeaders map[string]string) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Add("Content-Type", "text/html; charset=UTF-8")
 		err := page.Execute(w, map[string]interface{}{
 			"title":                title,
 			"endpoint":             endpoint,
-			"headers":              headers,
+			"fetcherHeaders":       fetcherHeaders,
+			"uiHeaders":            uiHeaders,
 			"endpointIsAbsolute":   endpointHasScheme(endpoint),
 			"subscriptionEndpoint": getSubscriptionEndpoint(endpoint),
 			"version":              "3.0.1",