DEV Community

Santhanam Elumalai
Santhanam Elumalai

Posted on • Edited on

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

#api #zod #zodios #webdev

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)