feat(DEV-248): added RequestOptions composable to set headers globally

Author: DKoenig9

src/runtime/composables/gql-async-query.ts

@@ -8,13 +8,15 @@ import { hashPasswords } from '../functions/graphql-meta';
 import { useAuthState } from '../states/auth';
 import { useAuth } from './use-auth';
 import { useHelper } from './use-helper';
+import { useRequestOptions } from './use-request-options';
 
 export async function gqlAsyncQuery<T = any>(method: string, options: IGraphQLOptions = {}): Promise<AsyncData<T, Error>> {
   const { $graphql, _meta } = useNuxtApp();
   const _nuxtApp = useNuxtApp();
   const { accessTokenState } = useAuthState();
   const { checkTokenAndRenew } = useAuth();
   const { generateUniqueHash } = useHelper();
+  const { getHeaders } = useRequestOptions();
 
   // Check parameters
   if (!method) {
@@ -123,8 +125,9 @@ export async function gqlAsyncQuery<T = any>(method: string, options: IGraphQLOp
       await callWithNuxt(_nuxtApp, checkTokenAndRenew);
 
       const requestHeaders: Record<string, string> = {
-        authorization: `Bearer ${accessTokenState.value}`,
+        ...getHeaders(),
         ...(options.headers || {}),
+        authorization: `Bearer ${accessTokenState.value}`,
       };
 
       let result = await $graphql.default.request(documentNode, variables, requestHeaders);

src/runtime/composables/gql-mutation.ts

@@ -8,12 +8,14 @@ import type { IGraphQLOptions } from '../interfaces/graphql-options.interface';
 import { hashPasswords } from '../functions/graphql-meta';
 import { useAuthState } from '../states/auth';
 import { useAuth } from './use-auth';
+import { useRequestOptions } from './use-request-options';
 
 export async function gqlMutation<T = any>(method: string, options: IGraphQLOptions = {}): Promise<{ data: T; error: GraphqlError }> {
   const { $graphql, _meta } = useNuxtApp();
   const _nuxtApp = useNuxtApp();
   const { accessTokenState, refreshTokenState } = useAuthState();
   const { checkTokenAndRenew } = useAuth();
+  const { getHeaders } = useRequestOptions();
 
   // Check parameters
   if (!method) {
@@ -133,8 +135,9 @@ export async function gqlMutation<T = any>(method: string, options: IGraphQLOpti
   }
 
   const requestHeaders: Record<string, string> = {
-    authorization: `Bearer ${method === 'refreshToken' ? refreshTokenState.value : accessTokenState.value}`,
+    ...getHeaders(),
     ...(options.headers || {}),
+    authorization: `Bearer ${method === 'refreshToken' ? refreshTokenState.value : accessTokenState.value}`,
   };
 
   let data;

src/runtime/composables/gql-query.ts

@@ -8,12 +8,14 @@ import type { IGraphQLOptions } from '../interfaces/graphql-options.interface';
 import { hashPasswords } from '../functions/graphql-meta';
 import { useAuthState } from '../states/auth';
 import { useAuth } from './use-auth';
+import { useRequestOptions } from './use-request-options';
 
 export async function gqlQuery<T = any>(method: string, options: IGraphQLOptions = {}): Promise<{ data: T; error: GraphqlError | null }> {
   const { $graphql, _meta } = useNuxtApp();
   const _nuxtApp = useNuxtApp();
   const { accessTokenState } = useAuthState();
   const { checkTokenAndRenew } = useAuth();
+  const { getHeaders } = useRequestOptions();
 
   // Check parameters
   if (!method) {
@@ -122,8 +124,9 @@ export async function gqlQuery<T = any>(method: string, options: IGraphQLOptions
   await callWithNuxt(_nuxtApp, checkTokenAndRenew);
 
   const requestHeaders: Record<string, string> = {
-    authorization: `Bearer ${accessTokenState.value}`,
+    ...getHeaders(),
     ...(options.headers || {}),
+    authorization: `Bearer ${accessTokenState.value}`,
   };
 
   let data = null;

src/runtime/composables/use-auth-fetch.ts

@@ -4,6 +4,7 @@ import { useRuntimeConfig } from 'nuxt/app';
 
 import { useAuthState } from '../states/auth';
 import { useAuth } from './use-auth';
+import { useRequestOptions } from './use-request-options';
 
 export function useAuthFetch<
   DefaultT = unknown,
@@ -14,6 +15,7 @@ export function useAuthFetch<
 >(request: R, opts?: O): Promise<TypedInternalResponse<R, T, ExtractedRouteMethod<R, O>>> {
   const { requestNewToken } = useAuth();
   const { accessTokenState } = useAuthState();
+  const { getHeaders } = useRequestOptions();
   const config = useRuntimeConfig();
 
   // @ts-expect-error - because of nice types from ofetch <3
@@ -23,6 +25,7 @@ export function useAuthFetch<
     async onRequest(data: any) {
       if (accessTokenState.value) {
         data.options.headers = {
+          ...getHeaders(),
           ...data.options.headers,
           Authorization: `Bearer ${accessTokenState.value}`,
         };

src/runtime/composables/use-request-options.ts

@@ -0,0 +1,14 @@
+export function useRequestOptions() {
+  let headers: Record<string, string> = {};
+  const setHeaders = (newHeaders: Record<string, string>) => {
+    headers = newHeaders;
+  };
+  const getHeaders = () => {
+    return headers;
+  };
+
+  return {
+    getHeaders,
+    setHeaders,
+  };
+}

src/runtime/plugins/ws.client.ts

@@ -3,19 +3,23 @@ import { createClient } from 'graphql-ws';
 import { defineNuxtPlugin, useNuxtApp, useRuntimeConfig } from 'nuxt/app';
 import { reactive } from 'vue';
 
+import { useRequestOptions } from '../composables/use-request-options';
+
 export const wsHeaders = reactive<Record<string, string>>({});
 
 export default defineNuxtPlugin({
   name: 'ws',
   async setup() {
     const nuxtApp = useNuxtApp();
     const { wsUrl } = useRuntimeConfig().public;
+    const { getHeaders } = useRequestOptions();
 
     const client = createClient({
       connectionParams: async () => {
         const { accessTokenState } = useAuthState();
         return {
           Authorization: 'Bearer ' + accessTokenState.value,
+          ...getHeaders(),
           ...wsHeaders,
         };
       },