[React] Orval Codegenerator를 사용한 Swagger -> React-Query 코드 자동생성

Orval 라이브러리는 Restful Codegen 라이브러리로, 
React app, React-query, Svelte-query, Vue-query, React app with swr, nx fastify react, angular app 등 
다양한 라이브러리에서 endPoint별 Codegen 기능을 제공한다. 

 

나는 React-Query 기반 Code generator가 필요해서 열심히 구글링을 하던 중 가장 강력하고 안정적으로 보이는 Orval이라는 라이브러리를 발견했다. 

 

https://orval.dev/

orval

https://github.com/anymaniax/orval

GitHub - anymaniax/orval: orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI

공식문서와 Github이다. 

공식문서에 사용법이 굉장히 친절하게 잘 정리되어 있었다. 

 

사용을 위해서는 먼저 위와 같이 전역적으로 설치를 해주어야 한다. 

 

이후 프로젝트의 Root 경로에 orval.config.js 파일을 생성해준다. 이곳에서 Codegen 관련 여러가지 커스텀 및 설정을 해줄 수 있다.

 

orval.config.js

나는 React-Query 코드 생성을 해야했기에, client에 react-query를 명시해주었다.

target은 생성될 코드의 경로이며, schemas는 생성될 타입들의 경로이다. 

input에는 전환할 swagger의 url 혹은 swagger 문서 정보가 정리되어 있는 yaml파일의 경로를 넣어주면 된다. 

 

만약 axios의 baseUrl, timeout 등 커스텀이 필요하다면,

 

위와 같이 custom instance 파일을 만들어준 뒤 

orval.config.js의 output에 커스텀 인스턴스의 경로와 이름을 추가해주면 된다.

 

 

이후 CLI에서 orval 명령어를 사용하여 Code generator를 실행시킬 수 있다. 

 

설정한 경로에 Swagger 기반 React-Query 코드들이 자동으로 생성된 것을 확인할 수 있다.