Refactor [@novu/client] : remove axios dependency and use fetch inste…

…ad (#5554)

* refactor: Update HttpClient to use fetch API instead of axios

* refactor: Remove axios dependency from shared package.json and pnpm-lock.yaml

* feat: add apiversion option

* refactor: move http-client to @novu/client

* feat: move http-client to @novu/client

* feat: add error handling and update the constructor params

* feat: overload constructor

libs/shared-web/src/api/api.client.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { IParamObject } from '@novu/shared';
+import { CustomDataType } from '@novu/shared';
 
 import { API_ROOT } from '../config';
 
@@ -44,7 +44,7 @@ export const api = {
         return Promise.reject(error?.response?.data || error?.response || error);
       });
   },
-  post(url: string, payload, params?: IParamObject) {
+  post(url: string, payload, params?: CustomDataType) {
     return axios
       .post(`${API_ROOT}${url}`, payload, { params, headers: getHeaders() })
       .then((response) => response.data?.data)

libs/shared/package.json

@@ -38,7 +38,6 @@
     }
   },
   "dependencies": {
-    "axios": "^1.6.2",
     "class-transformer": "0.5.1",
     "class-validator": "0.14.0"
   },

libs/shared/src/services/index.ts

@@ -1,2 +1 @@
-export * from './http-client';
 export * from './feature-flags';

libs/shared/src/types/shared/index.ts

@@ -9,3 +9,11 @@ export interface IResponseError {
   message: string;
   statusCode: number;
 }
+
+export interface IPaginatedResponse<T = unknown> {
+  data: T[];
+  hasMore: boolean;
+  totalCount: number;
+  pageSize: number;
+  page: number;
+}

packages/client/src/api/api.service.ts

@@ -1,27 +1,45 @@
 import {
   IMessage,
-  HttpClient,
   ButtonTypeEnum,
   MessageActionStatusEnum,
-  IParamObject,
+  CustomDataType,
   IPaginatedResponse,
 } from '@novu/shared';
+import { HttpClient } from '../http-client';
 import {
   ITabCountQuery,
   IStoreQuery,
   IUserPreferenceSettings,
   IUnseenCountQuery,
   IUnreadCountQuery,
   IUserGlobalPreferenceSettings,
+  ApiOptions,
 } from '../index';
 
 export class ApiService {
   private httpClient: HttpClient;
 
   isAuthenticated = false;
 
-  constructor(private backendUrl: string) {
-    this.httpClient = new HttpClient(backendUrl);
+  constructor(backendUrl: string, apiVersion?: ApiOptions['apiVersion']);
+  constructor(options?: ApiOptions);
+  constructor(...args: any) {
+    if (arguments.length === 2) {
+      this.httpClient = new HttpClient({
+        backendUrl: args[0],
+        apiVersion: args[1],
+      });
+    } else if (arguments.length === 1) {
+      if (typeof args[0] === 'object') {
+        this.httpClient = new HttpClient(args[0]);
+      } else if (typeof args[0] === 'string') {
+        this.httpClient = new HttpClient({
+          backendUrl: args[0],
+        });
+      }
+    } else {
+      this.httpClient = new HttpClient();
+    }
   }
 
   setAuthorizationToken(token: string) {
@@ -107,7 +125,7 @@ export class ApiService {
       `/widgets/notifications/feed`,
       {
         page,
-        payload: payloadString,
+        ...(payloadString && { payload: payloadString }),
         ...rest,
       }
     );
@@ -138,21 +156,21 @@ export class ApiService {
   async getUnseenCount(query: IUnseenCountQuery = {}) {
     return await this.httpClient.get(
       '/widgets/notifications/unseen',
-      query as unknown as IParamObject
+      query as unknown as CustomDataType
     );
   }
 
   async getUnreadCount(query: IUnreadCountQuery = {}) {
     return await this.httpClient.get(
       '/widgets/notifications/unread',
-      query as unknown as IParamObject
+      query as unknown as CustomDataType
     );
   }
 
   async getTabCount(query: ITabCountQuery = {}) {
     return await this.httpClient.get(
       '/widgets/notifications/count',
-      query as unknown as IParamObject
+      query as unknown as CustomDataType
     );
   }
 

packages/client/src/http-client/http-client.ts

@@ -0,0 +1,103 @@
+import { ApiOptions } from '..';
+import { CustomDataType } from '@novu/shared';
+
+const DEFAULT_API_VERSION = 'v1';
+const DEFAULT_BACKEND_URL = 'https://api.novu.co';
+export class HttpClient {
+  private backendUrl: string;
+  private apiVersion: string;
+  private headers: Record<string, string>;
+
+  constructor({
+    apiVersion = DEFAULT_API_VERSION,
+    backendUrl = DEFAULT_BACKEND_URL,
+  }: ApiOptions = {}) {
+    this.apiVersion = apiVersion;
+    this.backendUrl = `${backendUrl}/${this.apiVersion}`;
+    this.headers = {
+      'Content-Type': 'application/json',
+    };
+  }
+
+  setAuthorizationToken(token: string) {
+    this.headers.Authorization = `Bearer ${token}`;
+  }
+
+  disposeAuthorizationToken() {
+    delete this.headers.Authorization;
+  }
+
+  async getFullResponse(url: string, params?: CustomDataType) {
+    const response = await this.doFetch(url + this.getQueryString(params));
+
+    return await response.json();
+  }
+
+  async get(url: string, params?: CustomDataType) {
+    const response = await this.doFetch(url + this.getQueryString(params));
+    const data = await response.json();
+
+    return data.data;
+  }
+
+  async post(url: string, body = {}) {
+    const response = await this.doFetch(url, {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+    const data = await response.json();
+
+    return data.data;
+  }
+
+  async patch(url: string, body = {}) {
+    const response = await this.doFetch(url, {
+      method: 'PATCH',
+      body: JSON.stringify(body),
+    });
+    const data = await response.json();
+
+    return data.data;
+  }
+
+  async delete(url: string, body = {}) {
+    const response = await this.doFetch(url, {
+      method: 'DELETE',
+      body: JSON.stringify(body),
+    });
+    const data = await response.json();
+
+    return data.data;
+  }
+
+  private getQueryString(params?: CustomDataType) {
+    if (!params) return '';
+
+    const queryString = new URLSearchParams(params as any);
+
+    return '?' + queryString.toString();
+  }
+
+  private async doFetch(url: string, options: RequestInit = {}) {
+    try {
+      const response = await fetch(this.backendUrl + url, {
+        ...options,
+        headers: this.headers,
+      });
+      await this.checkResponseStatus(response);
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  private async checkResponseStatus(response: Response) {
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(
+        `HTTP error! Status: ${response.status}, Message: ${errorData.message}`
+      );
+    }
+  }
+}

packages/client/src/http-client/index.ts

@@ -0,0 +1 @@
+export * from './http-client';

packages/client/src/index.ts

@@ -49,4 +49,10 @@ export type PreferenceSettingsType = {
   enabled: boolean;
   channels: IPreferenceChannels;
 };
+
+export type ApiOptions = {
+  apiVersion?: string;
+  backendUrl?: string;
+};
+
 export { ApiService } from './api/api.service';