Building a Robust API Layer - Implementation with `api-def` Package

Continuing our series, let's delve into the practical implementation using the api-def package.

Recap:

• We explored the concept of the api-def package in the previous post.
• It centralizes API definitions and provides a consistent interface for making API requests.

Implementation Breakdown (Part 1: api-def-package Setup)

Project Setup:

• Existing Project: Assuming you've bootstrapped your application based on the previous post Bootstrapping With Turbo Repo.

• Dependencies: Install the required packages using npm or yarn:
  

   npm install @zodios/core zod typescript axios eslint
  

API Definition:

• Create a folder named user under src to store API definitions specific to user data.

• Define the API schema using Zod:
  

   import { z } from "zod";
  
   export const UserProfileSchema = z.object({
     firstName: z.string(),
     lastName: z.string(),
     email: z.string().email(),
   });
  
   export const Users = z.array(UserProfileSchema);
  
   export const UserSchema = {
     UserProfileSchema,
     Users,
   };
  

• Create separate files for types and query keys for better organization.

API Endpoint:

• Use Zodios to create the API endpoint for fetching users:
  

   import { makeEndpoint } from "@zodios/core";
   import { UserSchema } from "./user-schema";
  
   export const getUsers = makeEndpoint({
     method: "post",
     path: "user/search",
     alias: "getUsers",
     parameters: [
       {
         type: "Body",
         name: "getUsersPayload",
         schema: UserSchema.UserProfileSchema.partial(),
       },
     ],
     response: UserSchema.Users,
   });
  

Query Key:

• Define a method to generate query keys for caching and invalidation:
  

   import { User } from "./user-type";
  
   export const GetUserKeys = {
     getUsers: (requestBody: Partial<User.UserProfile>) => {
       return [
         {
           requestBody,
         },
       ];
     },
   };
  

API Client:

• Create an API client using Zodios to make API calls based on the defined endpoint:
  

   import { Zodios, makeApi } from "@zodios/core";
   import { getUsers } from "./user/user-endpoint";
  
   const api = makeApi([getUsers]);
   export const ApiClient = new Zodios("http://localhost:3000/api/", api);
  

Export:

• Export all the components (schemas, types, query keys, API client) from a central index file:
  

   export * from "./queryKey";
   export * from "./schemas";
   export * from "./types";
   export * from "./apiclient";
  

This completes the implementation of the api-def package. In the next part, we'll demonstrate how to integrate this package with a Next.js application for client-side and server-side API fetching.

Github PR Location

Stay tuned for the next post!