DEV Community

Santhanam Elumalai
Santhanam Elumalai

Posted on • Updated on

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!

Top comments (0)