openapi-fetch library

환경 설정

1. 설치

npm install openapi-fetch
npm install -D openapi-typescript typescript

2. 설정 파일 생성

npx openapi-typescript ./path/to/api/v1.yaml -o ./src/lib/api/v1.d.ts

사용 예시

GET

적용 후:

const { data: user, error } = await client.GET("/users/{id}", {
  params: { path: { id: "123" } },
});
if (error) console.error("Failed to fetch user");

적용 전:

async function getUser(id: string) {
  const response = await fetch(`/users/${id}`, {
    method: "GET",
  });
  if (!response.ok) throw new Error("Failed to fetch user");
  return response.json();
}
const user = await getUser("123");

POST

적용 후:

const { data: newUser, error } = await client.POST("/users", {
  body: {
    name: "Alice",
    email: "alice@example.com",
  },
});
if (error) console.error("Failed to create user");

적용 전:

async function createUser(userData: { name: string; email: string }) {
  const response = await fetch(`/users`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(userData),
  });
  if (!response.ok) throw new Error("Failed to create user");
  return response.json();
}
const newUser = await createUser({ name: "Alice", email: "alice@example.com" });

PUT

적용 후:

const { data: updatedUser, error } = await client.PUT("/users/{id}", {
  params: { path: { id: "123" } },
  body: {
    name: "Alice Updated",
    email: "alice.updated@example.com",
  },
});
if (error) console.error("Failed to update user");

적용 전:

async function updateUser(id: string, userData: { name: string; email: string }) {
  const response = await fetch(`/users/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(userData),
  });
  if (!response.ok) throw new Error("Failed to update user");
  return response.json();
}
const updatedUser = await updateUser("123", { name: "Alice Updated", email: "alice.updated@example.com" });

PATCH

적용 후:

const { data: patchedUser, error } = await client.PATCH("/users/{id}", {
  params: { path: { id: "123" } },
  body: { email: "new.email@example.com" },
});
if (error) console.error("Failed to patch user");

적용 전:

async function patchUser(id: string, partialData: { email?: string }) {
  const response = await fetch(`/users/${id}`, {
    method: "PATCH",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(partialData),
  });
  if (!response.ok) throw new Error("Failed to patch user");
  return response.json();
}
const patchedUser = await patchUser("123", { email: "new.email@example.com" });

DELETE

적용 후:

const { error } = await client.DELETE("/users/{id}", {
  params: { path: { id: "123" } },
});
if (error) console.error("Failed to delete user");

적용 전:

async function deleteUser(id: string) {
  const response = await fetch(`/users/${id}`, {
    method: "DELETE",
  });
  if (!response.ok) throw new Error("Failed to delete user");
}
await deleteUser("123");

OPTIONS

적용 후:

const { data: options, error } = await client.OPTIONS("/users");
if (error) console.error("Failed to get options");
else console.log("Allowed methods:", options);

적용 전:

async function getOptions(path: string) {
  const response = await fetch(path, { method: "OPTIONS" });
  if (!response.ok) throw new Error("Failed to get options");
  return response.headers.get("Allow");
}
const allowedMethods = await getOptions("/users");

HEAD

적용 후:

const { error } = await client.HEAD("/users");
if (error) console.error("Failed to fetch headers");
else console.log("Headers fetched successfully!");

적용 전:

async function getHeaders(path: string) {
  const response = await fetch(path, { method: "HEAD" });
  if (!response.ok) throw new Error("Failed to fetch headers");
  return response.headers;
}
const headers = await getHeaders("/users");

TRACE

적용 후:

const { data: traceInfo, error } = await client.TRACE("/users");
if (error) console.error("Failed to trace request");
else console.log("Trace info:", traceInfo);

적용 전:

async function traceRequest(path: string) {
  const response = await fetch(path, { method: "TRACE" });
  if (!response.ok) throw new Error("Failed to trace request");
  return response.text();
}
const traceInfo = await traceRequest("/users");

---

참고: chatGPT