Setup API management using the Repository Pattern

plugins/apiService.ts

@@ -0,0 +1,16 @@
+import FetchFactory from '~/services/factory';
+import { AuthModule } from '~/services/modules';
+
+export default defineNuxtPlugin((nuxtApp) => {
+ const API_SERVICE = new FetchFactory(nuxtApp.$config.public.apiHost, 10000);
+
+ const modules = {
+ auth: AuthModule(API_SERVICE)
+ };
+
+ return {
+ provide: {
+ apiService: modules
+ }
+ };
+});

services/ApiEndpoint.ts

@@ -0,0 +1,7 @@
+export const API_ENDPOINT = {
+ auth: {
+ signUp: '/user/register',
+ login: '/user/login',
+ logout: '/user/logout'
+ }
+};

services/factory.ts

@@ -0,0 +1,47 @@
+import { type FetchOptions as FetchOptionsSystem } from 'ofetch';
+import type { IError } from './type';
+
+export default class FetchFactory {
+ private instance;
+
+ constructor(baseURL: string, timeout: number) {
+ this.instance = $fetch.create({
+ baseURL,
+ timeout,
+ retry: 0,
+ onRequest({ options, request }) {},
+ onRequestError({ request, options, error }) {},
+ onResponseError(error) {
+ console.log('error', error);
+ },
+ onResponse(data) {}
+ });
+ }
+
+ handleError(res: IError | unknown) {}
+
+ get<T>(url: string, fetchOptions?: FetchOptionsSystem<'json'>): Promise<T> {
+ return this.instance(url, {
+ method: 'GET' as any,
+ ...fetchOptions
+ });
+ }
+
+ post<T>(url: string, fetchOptions?: FetchOptionsSystem<'json'>): Promise<T> {
+ const headers = {
+ 'Content-Type': 'application/json'
+ };
+ return this.instance(url, {
+ method: 'POST' as any,
+ headers,
+ ...fetchOptions
+ });
+ }
+
+ put<T>(url: string, fetchOptions?: FetchOptionsSystem<'json'>): Promise<T> {
+ return this.instance(url, {
+ method: 'PUT' as any,
+ ...fetchOptions
+ });
+ }
+}

services/modules/auth/index.ts

@@ -0,0 +1,33 @@
+// import { type AsyncDataOptions } from '#app';
+import { type FetchOptions } from 'ofetch';
+import type { IAuthResponseData, ILoginData, ISignUpData } from './type';
+import { API_ENDPOINT } from '~/services/ApiEndpoint';
+import type FetchFactory from '~/services/factory';
+import type { IResponseData } from '~/services/type';
+
+const AuthModule = (apiService: FetchFactory) => {
+ const login = (data: ILoginData, fetchOptions?: FetchOptions<'json'>) =>
+ apiService.post<IAuthResponseData>(API_ENDPOINT.auth.login, {
+ body: data,
+ ...fetchOptions
+ });
+
+ const signUp = (data: ISignUpData, fetchOptions?: FetchOptions<'json'>) =>
+ apiService.post<IAuthResponseData>(API_ENDPOINT.auth.signUp, {
+ body: data,
+ ...fetchOptions
+ });
+
+ const logout = (fetchOptions?: FetchOptions<'json'>) =>
+ apiService.post<IResponseData>(API_ENDPOINT.auth.logout, {
+ ...fetchOptions
+ });
+
+ return {
+ login,
+ signUp,
+ logout
+ };
+};
+
+export default AuthModule;

services/modules/auth/type.d.ts

@@ -0,0 +1,20 @@
+export interface IPropfile {
+ identifier: string;
+ user_name: string;
+ email: string;
+}
+
+export interface ISignUpData {
+ email: string;
+ user_name?: string;
+ password: string;
+}
+
+export interface ILoginData {
+ user_name: string;
+ password: string;
+}
+
+export interface IAuthResponseData extends IResponseData {
+ data: IPropfile;
+}

services/modules/index.ts

@@ -0,0 +1 @@
+export { default as AuthModule } from './auth';

services/type.d.ts

@@ -0,0 +1,26 @@
+import { type FetchOptions } from 'ofetch';
+export interface IError extends Error {
+ response: {
+ _data: {
+ error: string;
+ data: string | null;
+ status: string;
+ };
+ status?: number;
+ };
+}
+
+export type IRequestError = {
+ message: string;
+};
+
+export interface IResponseData {
+ status: 'SUCCESS' | 'FAILED';
+ rows: number;
+ error: string;
+ data: object;
+}
+
+export interface IDataParams<T> {
+ fetchOptions?: FetchOptions<'json'>;
+}