Add an authorization tab for GraphQL (#2125)

Co-authored-by: Rishabh Agarwal <rishabh2001agarwal@gmail.com>
Co-authored-by: Rishabh Agarwal <45998880+RishabhAgarwal-2001@users.noreply.github.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/collections/graphql/Request.vue

@@ -123,6 +123,7 @@
 <script lang="ts">
 import { defineComponent, PropType, ref } from "@nuxtjs/composition-api"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
+import { cloneDeep } from "lodash"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { setGQLSession } from "~/newstore/GQLSession"
 
@@ -177,13 +178,16 @@ export default defineComponent({
         this.pick()
       } else {
         setGQLSession({
-          request: makeGQLRequest({
-            name: this.$props.request.name,
-            url: this.$props.request.url,
-            query: this.$props.request.query,
-            headers: this.$props.request.headers,
-            variables: this.$props.request.variables,
-          }),
+          request: cloneDeep(
+            makeGQLRequest({
+              name: this.$props.request.name,
+              url: this.$props.request.url,
+              query: this.$props.request.query,
+              headers: this.$props.request.headers,
+              variables: this.$props.request.variables,
+              auth: this.$props.request.auth,
+            })
+          ),
           schema: "",
           response: "",
         })