OpenAPI ts 라이브러리에서 formdata 보내는 방법

일단 OpenAPI typescript가 뭘까?

"openapi-typescript는 Node.js를 사용하여 OpenAPI 3.0 및 3.1 스키마를 TypeScript로 빠르게 변환합니다."( https://openapi-ts.dev/introduction )라고 한다.

백엔드 Swagger의 정보를 가지고 프론트엔드에서 사용할 타입을 만들어줄 수 있다.
openapi-fetch라는 것도 있는데, 그러면 OpenAPI 스키마를 가지고 type-safe하게 api 요청을 보낼 수 있다.

기존에는 (openapi-fetch의 createClient를 사용했는데, 특별한 설정 없이 사용했다.
params, body를 받아서 넘기는 정도로.

import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });

const { data, error } = await client.PUT("/blogposts", {
  body: {
    title: "New Post",
    body: "<p>New post body</p>",
    publish_date: new Date("2023-03-01T12:00:00Z").getTime(),
  },
});

-https://openapi-ts.dev/openapi-fetch/에서 가져옴-

그런데 파일을 업로드하게 되면서 multipart/form-data를 사용하게 됐다. 그랬더니 타입 에러가 나기 시작했다..ㅠ
'Type 'FormData' is missing the following properties from type ~~~~~'

'The expected type comes from property 'body' which is declared here on type~~~~'

 

나는 FormData를 보내는데,Swagger에서 가져온 대로 object형태로 보내라고 했다..
아래 같이 한 것이었따.

import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript


function toUpdateFormData(payload) {
  const formData = new FormData();
  const entries = Object.entries(payload);

  for (const [key, value] of entries) {
    formData.append(key, value);
  }

  return formData;
}


const client = createClient<paths>({ baseUrl: "https://myapi.dev/v1/" });

const formData = toUpdateFormData({
    title: "New Post",
    body: "<p>New post body</p>",
    publish_date: new Date("2023-03-01T12:00:00Z").getTime(),
  })
await client.PUT("/blogposts", {
  body:formData,  //body는 object형태로 받고 싶어하는데, formData는 FormData 타입이다.
});

-위 코드에서 조금 바꿈- 

formData는 FormData타입인데, body는 {title:string, body: ~~~, publish_data:~~~} 처럼 받기를 원하는 거였다.

(이 예시에서는 FormData로 할 필요가 없는 거 같긴 한데, image file같은게 있다고 생각해보자..ㅎㅎ)

 

근데 이런 경우에는 openapi-fetch의 bodySerializer라는 걸 사용하면 되는 거였다. https://openapi-ts.dev/openapi-fetch/api#bodyserializer 

const { data, error } = await client.PUT("/submit", {
  body: {
    name: "",
    query: { version: 2 },
  },
  bodySerializer(body) {
    const fd = new FormData();
    for (const name in body) {
      fd.append(name, body[name]);
    }
    return fd;
  },
});

 

이 코드 예시는 https://openapi-ts.dev/openapi-fetch/api#bodyserializer에서 가져옴

열심히 1시간 이상 찾은 거 같다....ㅠㅠ 
공식문서가 역시 짱이었다.