BA-1284: baseapp fetch

Author: anicioalexandre

packages/graphql/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @baseapp-frontend/graphql
 
+## 1.1.0
+
+### Minor Changes
+
+- `httpFetch` function now uses the `baseAppFetch` as its fetch function.
+
+### Patch Changes
+
+- Updated dependencies
+  - @baseapp-frontend/utils@2.2.0
+
 ## 1.0.4
 
 ### Patch Changes

packages/graphql/config/environment.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react'
 
-import { getToken } from '@baseapp-frontend/utils/functions/token'
+import { baseAppFetch } from '@baseapp-frontend/utils/functions/fetch/baseAppFetch'
+import { getToken } from '@baseapp-frontend/utils/functions/token/getToken'
 
 import { createClient } from 'graphql-ws'
 import WebSocket from 'isomorphic-ws'
@@ -20,26 +21,17 @@ import {
 
 const CACHE_TTL = 5 * 1000 // 5 seconds, to resolve preloaded results
 
-type RequestVariables = {
-  method: string
-  headers: {
-    Accept: string
-    'Content-Type'?: string
-    Authorization: string
-  }
+type GetFetchOptions = {
+  request: RequestParameters
+  variables: Variables
+  uploadables?: UploadableMap | null
 }
 
-const getFetchOptions = async (
-  request: RequestParameters,
-  variables: Variables,
-  uploadables?: UploadableMap | null,
-) => {
-  const authToken = await getToken()
-  const requestVariables: RequestVariables = {
+const getFetchOptions = ({ request, variables, uploadables }: GetFetchOptions) => {
+  const requestVariables = {
     method: 'POST',
     headers: {
       Accept: 'application/json',
-      Authorization: authToken ? `Token ${authToken}` : '',
     },
   }
 
@@ -56,15 +48,14 @@ const getFetchOptions = async (
     }
   }
 
-  requestVariables.headers['Content-Type'] = 'application/json'
   return {
     ...requestVariables,
-    body: JSON.stringify({
+    body: {
       query: request.text,
       operationName: request.name,
       operationKind: request.operationKind,
       variables,
-    }),
+    },
   }
 }
 
@@ -74,24 +65,29 @@ export async function httpFetch(
   cacheConfig?: CacheConfig,
   uploadables?: UploadableMap | null,
 ): Promise<GraphQLResponse> {
-  const fetchOptions = await getFetchOptions(request, variables, uploadables)
-
-  const response = await fetch(process.env.NEXT_PUBLIC_RELAY_ENDPOINT as string, fetchOptions)
-
-  const json = await response.json()
+  const fetchOptions = getFetchOptions({ request, variables, uploadables })
+  const response = await baseAppFetch('', {
+    baseUrl: process.env.NEXT_PUBLIC_RELAY_ENDPOINT,
+    decamelizeRequestBodyKeys: false,
+    decamelizeRequestParamsKeys: false,
+    camelizeResponseDataKeys: false,
+    stringifyBody: !uploadables,
+    setContentType: !uploadables,
+    ...fetchOptions,
+  })
 
   // GraphQL returns exceptions (for example, a missing required variable) in the "errors"
   // property of the response. If any exceptions occurred when processing the request,
   // throw an error to indicate to the developer what went wrong.
-  if (Array.isArray(json.errors)) {
+  if (Array.isArray(response.errors)) {
     throw new Error(
       `Error fetching GraphQL query '${request.name}' with variables '${JSON.stringify(
         variables,
-      )}': ${JSON.stringify(json.errors)}`,
+      )}': ${JSON.stringify(response.errors)}`,
     )
   }
 
-  return json
+  return response
 }
 
 const wsClient = createClient({

packages/graphql/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@baseapp-frontend/graphql",
   "description": "GraphQL configurations and utilities",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "main": "./dist/index.ts",
   "module": "./dist/index.mjs",
   "scripts": {

packages/utils/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baseapp-frontend/utils
 
+## 2.2.0
+
+### Minor Changes
+
+- Implement the `baseAppFetch` fetch function.
+- Minor changes on `createAxiosInstance` to ensure it won't try to refresh the token for api routes included in `servicesWithoutToken`.
+- Implement the `getAccessToken` to abstract only the access token refresh fetch, without setting cookies.
+- Minor changes on `refreshAccessToken` to reuse the `getAccessToken` function.
+
 ## 2.1.0
 
 ### Minor Changes

packages/utils/functions/axios/createAxiosInstance/index.ts

@@ -35,11 +35,11 @@ export const createAxiosInstance = ({
   instance.defaults.headers.put['Content-Type'] = contentType
 
   const requestInterceptorId = instance.interceptors.request.use(async (request) => {
+    const isAuthTokenRequired = !servicesWithoutToken.some((regex) => regex.test(request.url || ''))
     let authToken = Cookies.get(cookieName)
 
-    if (authToken) {
-      const isTokenValid =
-        tokenType === TokenTypes.jwt ? isUserTokenValid(decodeJWT(authToken)) : true
+    if (authToken && isAuthTokenRequired && tokenType === TokenTypes.jwt) {
+      const isTokenValid = isUserTokenValid(decodeJWT(authToken))
       if (!isTokenValid) {
         try {
           authToken = await refreshAccessToken(cookieName, refreshCookieName)
@@ -50,15 +50,11 @@ export const createAxiosInstance = ({
           return Promise.reject(error)
         }
       }
+    }
 
-      if (
-        request.headers &&
-        !request.headers.Authorization &&
-        !servicesWithoutToken.some((regex) => regex.test(request.url || ''))
-      ) {
-        request.headers.Authorization =
-          tokenType === TokenTypes.jwt ? `Bearer ${authToken}` : `Token ${authToken}`
-      }
+    if (request.headers && !request.headers.Authorization && authToken && isAuthTokenRequired) {
+      request.headers.Authorization =
+        tokenType === TokenTypes.jwt ? `Bearer ${authToken}` : `Token ${authToken}`
     }
 
     if (request.data && !file) {
@@ -101,6 +97,8 @@ export const createAxiosInstance = ({
       ) {
         const newError = { response: { data: {} } }
         newError.response.data = humps.camelizeKeys(error.response.data)
+
+        return Promise.reject(newError)
       }
       return Promise.reject(error)
     },