자동 완성 기능을 제공하는 클라이언트 API를 작성하는 데는 시간이 많이 걸립니다. 항상 동일한 종류의 상용구 코드를 작성하거나 유지 관리가 어려운 openapi 코드 생성기를 사용해야 합니다.
Zodios은 프런트엔드(및 선택적으로 백엔드) API 클라이언트를 쉽게 만들 수 있도록 만들어졌습니다.
종단 간 유형 안전성을 갖춘 오픈 소스 REST API 도구 상자입니다.
깨끗하고 직관적이며 선언적인 구문으로 REST API를 만들 수 있습니다.
TypeScript 과 함께 사용하는 것이 가장 좋지만 순수JavaScript 와 함께 사용할 수도 있습니다.

zod로 반환된 데이터 선언

일부 스키마를 사전 정의하여 API 정의에서 재사용할 수 있습니다. Zodios는 이러한 정의를 사용하여 런타임 검사를 수행합니다. 그러면 API 클라이언트가 런타임 시 형식이 안전해집니다.

import { Zodios, asErrors } from "@zodios/core";
import z from "zod";

const errors = asErrors([
  {
    status: "default",
    schema: z.object({
      error: z.object({
        code: z.number(),
        message: z.string(),
      }),
    }),
  },
]);

const user = z.object({
  id: z.number(),
  name: z.string(),
  age: z.number().positive(),
  email: z.string().email(),
});

API 엔드포인트 선언

그런 다음 Zodios 생성자에서 직접 API 끝점을 정의할 수 있습니다.

const apiClient = new Zodios('/api', [
  {
    method: "get",
    path: "/users",
    alias: "getUsers",
    parameters: [
      {
        name: "limit",
        type: "Query",
        schema: z.number().positive().default(10),
      },
      {
        name: "page",
        type: "Query",
        schema: z.number().positive().default(0),
      },
    ],
    response: z.object({
      nextPage: z.number(),
      users: z.array(user),
    }),
  },
  {
    method: "get",
    path: "/users/:id",
    alias: "getUser",
    response: user,
    errors,
  },
  {
    method: "post",
    path: "/users",
    alias: "createUser",
    parameters: [
      {
        name: "user",
        type: "Body",
        schema: user.omit({ id: true }),
      },
    ],
    response: user,
    errors,
  },  
]);

API 호출

마지막으로 이를 사용하여 API에서 데이터를 가져올 수 있습니다.

// get all users
const users = await apiClient.getUsers();
// get user by id
const user = await apiClient.getUser({ params: { id: 1 } });
// create user
const newUser = await apiCLient.createUser({ name: "John", age: 20, email: "[email protected]"});

반응과 함께 Zodios 사용

Zodios는 반응 쿼리를 기반으로 반응 후크를 제공합니다. Zodios는 쿼리 키를 직접 관리할 필요 없이 직접 관리합니다.

const zodiosHooks = new ZodiosHooks("myAPI", apiClient);

const Users = () => {
  const {
    data: users,
    isLoading,
    error,
    fetchNextPage,
    invalidate: invalidateUsers, // zodios also provides invalidation helpers
  } = zodiosHooks.useInfiniteQuery(
    "/users",
    { queries: { limit: 10 } },
    {
      getPageParamList: () => {
        return ["page"];
      },
      getNextPageParam: () => {
        return {
          queries: {
            page: page.nextPage + 1,
          },
        };
      },
    }
  );
  const { mutate } = zodiosHooks.useCreateUser(undefined, {
    onSuccess: () => invalidateUsers(),
  });

  return (
    <>
      <h1>Users</h1>
      <button onClick={() => mutate({ name: "john doe" })}>add user</button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {(error as Error).message}</div>}
      {users && (
        <>
          <ul>
            {users.pages.flatMap((page) =>
              page.map((user) => <li key={user.id}>{user.name}</li>)
            )}
          </ul>
          <button onClick={() => fetchNextPage()}>more</button>
        </>
      )}
    </>
  );
};

무엇 향후 계획

Zodios에는 훨씬 더 많은 도구가 내장되어 있습니다.
API 클라이언트에는 강력한 플러그인 시스템이 있습니다.
Zodios는 또한 '익스프레스' 어댑터를 제공하므로 nodeJS로 서버 API를 안전하게 생성할 수도 있습니다.
'NextJS'와도 잘 통합됩니다.

zodios 살펴보기website