feat: allow playground consumers to customize headers (wundergraph#1183)

playground/src/components/playground/index.tsx

@@ -31,17 +31,23 @@ const validateHeaders = (headers: Record<string, string>) => {
   }
 };
 
+type GraphiQLScripts = {
+  transformHeaders?: (headers: Record<string, string>) => Record<string, string>;
+};
+
 const graphiQLFetch = async (
   schema: GraphQLSchema | null,
   clientValidationEnabled: boolean,
+  scripts: GraphiQLScripts | undefined,
   onFetch: any,
   url: URL,
   init: RequestInit,
 ) => {
   try {
-    const headers: Record<string, string> = {
-      ...(init.headers as Record<string, string>),
-    };
+    const initialHeaders = init.headers as Record<string, string>;
+    const headers: Record<string, string> = scripts?.transformHeaders
+      ? scripts.transformHeaders(initialHeaders)
+      : { ...initialHeaders };
 
     validateHeaders(headers);
 
@@ -263,6 +269,8 @@ export const Playground = (input: {
   routingUrl?: string;
   hideLogo?: boolean;
   theme?: 'light' | 'dark' | undefined;
+  scripts?: GraphiQLScripts;
+  fetch?: typeof fetch;
 }) => {
   const url = input.routingUrl || import.meta.env.VITE_ROUTING_URL || '{{graphqlURL}}';
 
@@ -366,7 +374,8 @@ export const Playground = (input: {
   });
 
   const getSchema = async () => {
-    const res = await fetch(url, {
+    const fetchFunc = input.fetch ? input.fetch : fetch;
+    const res = await fetchFunc(url, {
       body: JSON.stringify({
         operationName: 'IntrospectionQuery',
         query: getIntrospectionQuery(),
@@ -390,7 +399,7 @@ export const Playground = (input: {
       url: url,
       subscriptionUrl: window.location.protocol.replace('http', 'ws') + '//' + window.location.host + url,
       fetch: (...args) =>
-        graphiQLFetch(schema, clientValidationEnabled, onFetch, args[0] as URL, args[1] as RequestInit),
+        graphiQLFetch(schema, clientValidationEnabled, input.scripts, onFetch, args[0] as URL, args[1] as RequestInit),
     });
   }, [schema, clientValidationEnabled]);