{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Have you ever messed up when trying to handle tons of API? Do you want to implement the best way to handle API? I did, and I spent so much time to find this dream. But today, I want to share with you my way. This is called the Repository Pattern, I hope you see it as an option to solve this problem."}]},{"type":"paragraph","content":[{"type":"text","text":"Thanks to Vue Mastery and Luiz Eduardo Zappa, your article helped me so much."}]},{"type":"paragraph","content":[{"type":"text","text":"Vue Mastery article: "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://www.vuemastery.com/blog/api-management-in-nuxt-3-with-typescript/","target":"_blank","rel":"noopener ugc nofollow","class":"bi fg"}}],"text":"API Management in Nuxt 3 with TypeScript"}]},{"type":"paragraph","content":[{"type":"text","text":"Luiz Eduardo Zappa article: "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://medium.com/@luizzappa/nuxt-3-repository-pattern-organising-and-managing-your-calls-to-apis-with-typescript-acd563a4e046","target":"_blank","rel":"noopener","class":"bi fg"}}],"text":"Nuxt 3 | Repository pattern: organising and managing your calls to APIs (Typescript)"}]},{"type":"paragraph","content":[{"type":"text","text":"Link github repository:"},{"type":"text","marks":[{"type":"bold"}],"text":" "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://github.com/tranphuocloc070699/nuxt-repository-pattern","target":"_blank","rel":"noopener ugc nofollow","class":"bi fg"}},{"type":"bold"}],"text":"nuxt-repository-pattern"}]},{"type":"paragraph","content":[{"type":"text","text":"You can follow the article I mentioned above to understand what is repository pattern. I will show you how to implement it."}]},{"type":"horizontalRule"},{"type":"paragraph","content":[{"type":"text","text":"First of all. Let’s create a types folder to implement all data types that get from the server."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"mkdir types"}]},{"type":"paragraph","content":[{"type":"text","text":"To make this article simple to follow, I just created two models, Post and User. In the real world, you need to create tons of models, so you can divide them into files for easier managing."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"types/model.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"export interface IPost {\n userId: string;\n id: string;\n title: string;\n body: string;\n}\n\nexport interface IUser {\n id: number;\n name: string;\n username: string;\n email: string;\n accessToken:string;\n}\n"}]},{"type":"paragraph","content":[{"type":"text","text":"Then create a repository folder."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"mkdir repository"}]},{"type":"paragraph","content":[{"type":"text","text":"Create a factory.ts, this class is like a blueprint, any module (I will show later) will extend this class."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"italic"}],"text":"Note: you can add default headers in this class or custom any headers in the class that extend the Factory class."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"repository/factory.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import type {$Fetch, NitroFetchOptions} from 'nitropack'\n\ninterface IHttpFactory {\n method: 'GET' | 'HEAD' | 'PATCH' | 'POST' | 'PUT' | 'DELETE' | 'CONNECT' | 'OPTIONS' | 'TRACE' | 'get' | 'head' | 'patch' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace',\n url: string,\n fetchOptions?: NitroFetchOptions<'json'>,\n body?: object,\n}\n\nclass HttpFactory {\n private readonly $fetch: $Fetch;\n\n constructor(fetch: $Fetch) {\n this.$fetch = fetch;\n }\n\n async call({method, url, fetchOptions, body}: IHttpFactory): Promise {\n return this.$fetch(\n url,\n {\n method,\n body,\n headers: {\n 'Content-Type': 'application/json',\n },\n ...fetchOptions,\n }\n )\n }\n}\nexport default HttpFactory;"}]},{"type":"paragraph","content":[{"type":"text","text":"I create a routes.client to handle API endpoint from server, /api for call to Nuxt server."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"repository/routes.client.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"/*\n* Prefix /api for api server\n*/\nconst prefix : string = '/api';\n\n/*\n* Prefix /api/another for another server\n* */\nconst anotherPrefix : string = '/api/another'\n\nconst Routes = {\n Post:{\n FetchAll:() => `${prefix}/posts`,\n FetchDetail : (id: number) => `${prefix}/posts/${id}`,\n CreatePost :() => `${prefix}/posts`\n },\n User:{\n Authenticate:() => `${anotherPrefix}/users`\n }\n}\n\nexport default Routes"}]},{"type":"paragraph","content":[{"type":"text","text":"Now let us create a modules folder, this folder inside repository folder and contains a repository for your model like user, post, …"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"mkdir modules"}]},{"type":"paragraph","content":[{"type":"text","text":"I will create two modules, user-module, and post-module, which correspond to user model and post model."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"repository/modules/post.module.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import FetchFactory from \"../factory\";\nimport Routes from \"../routes.client\";\nimport type {IPost} from \"~/types/model\";\n\nclass PostModule extends FetchFactory {\n private readonly RESOURCE = Routes.Post;\n private accessToken: string = '';\n\n async fetchAll() {\n return this.call(\n {\n method: 'GET', url: `${this.RESOURCE.FetchAll()}`\n }\n )\n }\n\n async createPost(dto : IPost) {\n return this.call(\n {\n method: 'POST', url: `${this.RESOURCE.CreatePost()}`,body:dto, fetchOptions: {\n headers: {\n ...(this.accessToken ? {\n 'Authorization': `Bearer ${this.accessToken}`\n } : {})\n },\n\n }\n }\n )\n }\n async fetchDetail(id : number) {\n return this.call(\n {\n method: 'GET', url: `${this.RESOURCE.FetchDetail(id)}`, fetchOptions: {\n headers: {\n ...(this.accessToken ? {\n 'Authorization': `Bearer ${this.accessToken}`\n } : {})\n },\n\n }\n }\n )\n }\n\n setAccessToken(accessToken: string) {\n this.accessToken = accessToken;\n }\n}\n\nexport default PostModule;"}]},{"type":"paragraph","content":[{"type":"text","text":"You can see the setAccessToken function, this function authenticates the user and add the token server to headers."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"repository/modules/auth.module.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import FetchFactory from \"../factory\";\nimport Routes from \"../routes.client\";\nimport type { IUser} from \"~/types/model\";\n\nclass AuthModule extends FetchFactory {\n private readonly RESOURCE = Routes.User;\n async authenticate() {\n return this.call(\n {\n method: 'GET', url: `${this.RESOURCE.Authenticate()}`\n }\n )\n }\n}\n\nexport default AuthModule;"}]},{"type":"paragraph","content":[{"type":"text","text":"I just create an authenticate function to get token from server and add it to any endpoint that needs authenticate."}]},{"type":"paragraph","content":[{"type":"text","text":"Then create a plugins folder, this folder manages plugins of Nuxt."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"mkdir plugins"}]},{"type":"paragraph","content":[{"type":"text","text":"I will create a custom plugin, it helps us to access our repository."},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"plugins/api.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import PostModule from \"~/repository/modules/post.module\";\nimport AuthModule from \"~/repository/modules/auth.module\";\nexport interface IApiInstance {\n post: PostModule;\n auth: AuthModule;\n}\n\nexport default defineNuxtPlugin((nuxtApp) => {\n const config = useRuntimeConfig();\n const NUXT_BASE_URL_PROXY_SERVER : string = config.public.NUXT_BASE_URL_PROXY_SERVER;\n\n\n const apiFetcher = $fetch.create({\n baseURL: NUXT_BASE_URL_PROXY_SERVER,\n onRequest({ request, response }) {},\n });\n const postModule = new PostModule(apiFetcher);\n const authModule = new AuthModule(apiFetcher);\n\n const modules: IApiInstance = {\n post: postModule,\n auth: authModule,\n };\n /*\n * ! This code below is example for the case you want to authenticate user and set token to headers.\n * Why call api in process.client?\n * => Cookie only exist on client.\n * */\n if (process.client) {\n modules.auth\n .authenticate()\n .then((data) => {\n if(data.accessToken){\n postModule.setAccessToken(data.accessToken);\n }\n })\n .catch((err: any) => {\n console.error(\"Error occur:\" + err)\n\n });\n }\n\n return {\n provide: {\n api: modules,\n },\n };\n});"}]},{"type":"paragraph","content":[{"type":"text","text":"so far so good, now we can access our repository by $api . Another notice is if you need cookie to authenticate , you need to put authenticate api on client, because Nuxt cannot get cookie on server."}]},{"type":"paragraph","content":[{"type":"text","text":"The final step, we need to create a Nuxt server to handle request, in real world, we don’t want to expose server hostname, so Nuxt server as a proxy to hide server hostname. Isn’t that good?"}]},{"type":"paragraph","content":[{"type":"text","text":"When you create a Nuxt app by create-nuxt-app, it always create a server folder for you. So I just need to create routes.server.ts to handle requests."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"server/api/routes.server.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"export const Routes = {\n another:{\n name:'/api/another',\n regex:/^\\/api\\/another$/\n },\n core:{\n name:'/api',\n regex:/^\\/api\\//\n }\n}"}]},{"type":"paragraph","content":[{"type":"text","text":"Then create a […].ts, this file handle all routes call to /api."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"server/api/[…].ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { joinURL } from 'ufo'\nimport { Routes } from './routes.server'\n\nexport default defineEventHandler(async (event) => {\n const coreUrl = useRuntimeConfig().NUXT_BASE_URL_JSON_PLACEHOLDER_SERVER\n const anotherUrl = useRuntimeConfig().NUXT_BASE_URL_ANOTHER_SERVER\n\n let path = ''\n let target = ''\n /*\n * Case: /api\n * */\n if(event.path.startsWith(Routes.core.name)){\n path = event.path.replace(Routes.core.name, '')\n target = joinURL(coreUrl, path)\n }\n /*\n * Case: /api/another\n * */\n else if(event.path.startsWith(Routes.another.name)){\n path = event.path.replace(Routes.another.regex, '')\n target = joinURL(anotherUrl, path)\n }\n\n return proxyRequest(event, target)\n})"}]},{"type":"paragraph","content":[{"type":"text","text":"Tada, it done. Let’s create a example to use my repository."}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"stores/post.store.ts"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import type {IPost} from \"~/types/model\";\n\nimport {defineStore} from \"pinia\";\n\nexport const usePostStore = defineStore(\"post\", () => {\n const {$api} = useNuxtApp();\n const postList = ref([]);\n\n const fetchPostList = async () => {\n try {\n $api.post.fetchAll().then(data => {\n console.log(data)\n }).catch(error => {\n console.error(error)\n })\n } catch (error) {\n console.error(\"fetchPostList error:\" + error);\n }\n };\n\n return {postList, fetchPostList};\n});"}]},{"type":"paragraph","content":[{"type":"text","text":"And use on component"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n\n\n\n"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Conclusion"}]},{"type":"paragraph","content":[{"type":"text","text":"Thank you for reading my article. Your engagement is appreciated. I welcome your questions and ideas to improve and expand upon the topics discussed. Let’s continue this conversation together for further exploration and understanding."}]},{"type":"paragraph"}]}