feat: pass subscription Headers as connection_init payload (#2719)

Co-authored-by: Andrei Alecu <[email protected]>

Author: andreialecu

.changeset/late-queens-visit.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/toolkit': minor
+---
+
+Allow passing Headers for subscriptions into connection_init payload

packages/graphiql-toolkit/src/create-fetcher/createFetcher.ts

@@ -35,7 +35,6 @@ export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
   // simpler fetcher for schema requests
   const simpleFetcher = createSimpleFetcher(options, httpFetch);
 
-  const wsFetcher = getWsFetcher(options);
   const httpFetcher = options.enableIncrementalDelivery
     ? createMultipartFetcher(options, httpFetch)
     : simpleFetcher;
@@ -54,6 +53,8 @@ export function createGraphiQLFetcher(options: CreateFetcherOptions): Fetcher {
         )
       : false;
     if (isSubscription) {
+      const wsFetcher = getWsFetcher(options, fetcherOpts);
+
       if (!wsFetcher) {
         throw Error(
           `Your GraphiQL createFetcher is not properly configured for websocket subscriptions yet. ${

packages/graphiql-toolkit/src/create-fetcher/lib.ts

@@ -193,15 +193,18 @@ export const createMultipartFetcher = (
  * @param options {CreateFetcherOptions}
  * @returns
  */
-export const getWsFetcher = (options: CreateFetcherOptions) => {
+export const getWsFetcher = (
+  options: CreateFetcherOptions,
+  fetcherOpts: FetcherOpts | undefined,
+) => {
   if (options.wsClient) {
     return createWebsocketsFetcherFromClient(options.wsClient);
   }
   if (options.subscriptionUrl) {
-    return createWebsocketsFetcherFromUrl(
-      options.subscriptionUrl,
-      options.wsConnectionParams,
-    );
+    return createWebsocketsFetcherFromUrl(options.subscriptionUrl, {
+      ...options.wsConnectionParams,
+      ...fetcherOpts?.headers,
+    });
   }
   const legacyWebsocketsClient = options.legacyClient || options.legacyWsClient;
   if (legacyWebsocketsClient) {