OpenAPI의 React Query Codegen

Rapini은 React Query (Swagger) 파일을 사용하여 사용자 정의 OpenAPI 후크를 생성할 수 있는 새로운 도구입니다.

명령줄 인터페이스(CLI) 도구는 Open API 파일에 대한 경로를 가져오고 반응 후크, typescript 유형 및 axios http 요청을 포함하는 패키지를 생성합니다. 이 패키지는 게시할 수 있는 방식으로 편리하게 번들로 제공됩니다. NPM 또는 선택한 다른 패키지 레지스트리.

백엔드 엔드포인트 사용을 시작하기 위해 수동으로 axios 요청 함수를 작성하고 쿼리 코드에 반응할 필요가 없습니다. 코드를 생성하고 가져오기만 하면 기능을 더 빠르게 제공할 수 있습니다.

Open API 파일에서 반응 후크를 생성하는 방법

다음은 rapini CLI를 사용하여 Open API에서 반응 쿼리 후크, axios 요청 및 Typescript 유형을 생성하는 예입니다.

# Install the CLI tool globally (need npm)
npm i -g rapini

# Pass the path to your Open API file to rapini
rapini -p path/to/openapi.yaml

그리고 그게 다야! CLI를 전역적으로 설치하는 명령 1개와 필요한 모든 것을 생성하는 명령 1개.

생성된 코드는 현재 디렉터리의 rapini-generated-package 폴더에 출력되지만 CLI 옵션--output-dir을 사용하여 다음과 같이 변경할 수 있습니다: rapini -p path/to/openapi.yaml --output-dir /my-custom-package .

다음에 대한 옵션을 포함하여 생성된 코드를 사용자 지정하는 많은 CLI 옵션이 있습니다.

생성된 패키지package.json의 파일

에 대한 이름 및 패키지 버전 지정

OpenAPI 파일에 포함되지 않을 수 있으므로 모든 요청에 ​​대한 기본 URL 지정

OpenAPI 파일을 실제로 변경하지 않고 OpenAPI 파일에 있는 내용을 수정해야 하는 경우 요청에 사용되는 경로를 사용자 정의하도록 지정replacers

모든 옵션은 rapinireadme에서 찾을 수 있습니다.

왜 OpenAPI를 사용하여 Codegen React-Query를 사용합니까?

코드 생성 또는 코드 생성은 생산성을 높이고 버그를 줄이며 기능을 신속하게 제공하는 데 걸리는 시간을 줄이는 데 널리 사용되는 방법입니다.

OpenAPI는 이미 코드를 자동으로 작성하는 데 필요한 모든 정보를 제공하므로 더 이상 수동으로 코드를 작성할 필요가 없습니다. OpenAPI 파일에 이미 지정되어 있기 때문에 더 이상 모든 요청 페이로드 및 응답에 대해 Typescript 유형을 수동으로 작성할 필요가 없습니다. 더 이상 모든 요청에 ​​대해 axios 함수를 작성하거나 모든 axios 호출에 대해 쿼리 후크에 반응할 필요가 없습니다.

모든 GET 요청은 자체 React Query 사용자 지정 쿼리 후크를 가져오고 POST/PUT/PATCH/DELETE와 같은 GET이 아닌 모든 요청은 자체 사용자 지정 React 쿼리 돌연변이 후크를 가져옵니다.

OpenAPI로 코드 생성 Axios 요청을 하는 이유는 무엇입니까?

Rapini 요청 및 응답 인터셉터와 전역 구성에 대한 유연성 때문에 기본 http 클라이언트로 axios를 사용합니다. Rapini는 초기화할 때 axios 인스턴스를 가져오고 후드 아래의 모든 반응 쿼리 후크에 해당 인스턴스를 사용합니다.

반응 쿼리 OpenAPI Codegen 예제

rapini 을 사용하여 사용자 정의 npm 패키지를 생성하면 패키지에서 모든 반응 쿼리 후크, 유형, 요청 및 쿼리 키를 가져올 수 있습니다. 다음과 같이 출력 이름이 my-package 인 패키지를 생성했다고 가정해 보겠습니다. 그러면 다음과 같이 가져오기를 시작할 수 있습니다.

import { initialize } from "my-package";
import type { Pet } from "my-package";
import { axiosInstance } from "./your-custom-axios-instance";

const rapini = initialize(axiosInstance);

const { queries, mutations, queryIds, requests } = rapini;

const MyComponent = () => {
  const { data, isLoading, isError } = queries.usePets();

  return (
    <ul>
      {data.pets.map((pet) => (
        <li key={pet.id}>{pet.name}</li>
      ))}
    </ul>
  );
};

Rapini는 OpenAPIrapini -p path/to/openapi.yaml --output-dir /my-package를 사용하여 코드의 모든 후크 및 요청에 이름을 지정하므로 operationId와 같은 operationId가 포함된 요청이 있는 경우 createPet라는 axios 요청이 생성되고 쿼리 돌연변이 후크에 반응합니다. createPet라는 이름으로 생성되고 useCreatePet라는 쿼리 키가 생성되며 모든 관련 요청 페이로드가 고려됩니다.

나는 rapini를 즐기고 새로 생성된 코드로 대체하기 위해 오래된 코드를 삭제하기 시작하기를 바랍니다!