From 544b0453003ca5940c135faa75ff6d5e067b904f Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Thu, 28 Sep 2023 21:57:07 +0530
Subject: [PATCH] fix: authorisation headers not being sent along with
 subscriptions when using graphql (#3354)

* fix: send auth headers to the payload

* refactor: alert user that headers are sent to connection_init

* refactor: send headers only when headers are populated

* chore: cleanup code
---
 packages/hoppscotch-common/locales/en.json             |  1 +
 .../src/components/graphql/RequestOptions.vue          |  3 +++
 .../src/helpers/graphql/connection.ts                  | 10 +++++++---
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-common/locales/en.json b/packages/hoppscotch-common/locales/en.json
index 74c1e9884..a114f6c53 100644
--- a/packages/hoppscotch-common/locales/en.json
+++ b/packages/hoppscotch-common/locales/en.json
@@ -112,6 +112,7 @@
   },
   "authorization": {
     "generate_token": "Generate Token",
+    "graphql_headers": "Authorization Headers are sent as part of the payload to connection_init",
     "include_in_url": "Include in URL",
     "learn": "Learn how",
     "pass_key_by": "Pass by",
diff --git a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
index 378bbd3d3..c4861f8df 100644
--- a/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-common/src/components/graphql/RequestOptions.vue
@@ -136,6 +136,9 @@ const runQuery = async (
     const duration = Date.now() - startTime
     completePageProgress()
     toast.success(`${t("state.finished_in", { duration })}`)
+    if (definition?.operation === "subscription" && request.value.auth) {
+      toast.success(t("authorization.graphql_headers"))
+    }
   } catch (e: any) {
     console.log(e)
     // response.value = [`${e}`]
diff --git a/packages/hoppscotch-common/src/helpers/graphql/connection.ts b/packages/hoppscotch-common/src/helpers/graphql/connection.ts
index da8ea863d..6f6acb841 100644
--- a/packages/hoppscotch-common/src/helpers/graphql/connection.ts
+++ b/packages/hoppscotch-common/src/helpers/graphql/connection.ts
@@ -268,7 +268,7 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
   }
 
   if (operationType === "subscription") {
-    return runSubscription(options)
+    return runSubscription(options, finalHeaders)
   }
 
   const interceptorService = getService(InterceptorService)
@@ -299,7 +299,10 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
   return responseText
 }
 
-export const runSubscription = (options: RunQueryOptions) => {
+export const runSubscription = (
+  options: RunQueryOptions,
+  headers?: Record<string, string>
+) => {
   const { url, query, operationName } = options
   const wsUrl = url.replace(/^http/, "ws")
 
@@ -309,10 +312,11 @@ export const runSubscription = (options: RunQueryOptions) => {
 
   connection.socket.onopen = (event) => {
     console.log("WebSocket is open now.", event)
+
     connection.socket?.send(
       JSON.stringify({
         type: GQL.CONNECTION_INIT,
-        payload: {},
+        payload: headers ?? {},
       })
     )