React Hook "useAspidaCaller"는 REST API를 안전하게 호출하고 상태를 관리합니다.

REST API를 안전하게 호출하고 관리할 수 있는 useAspidaCaller라는 React Hooks 라이브러리가 작성되었습니다.
https://github.com/TeXmeijin/use-aspida-caller
대상 사용자는 aspida를 사용하여 REST API를 안전하게 실행하고 React를 사용합니다.
https://github.com/aspida/aspida

설치하다.

npm i use-aspida-caller
yarn add use-aspida-caller

※ 최초 명칭@texmeijin/use-aspida-caller이었으나 지금은 더 간단해졌습니다.

특징①로드나 오류 등 API 호출과 관련된 상태를 관리할 수 있음

useAspidaCaller를 사용하면 POST와 PUT 등 업데이트 시스템의 API를 안전하게 두드릴 수 있을 뿐만 아니라 로드와 오류 등 상태 관리도 선언적으로 가능하다.
샘플 코드

const Sample = () => {
  const {
    put,
    isPutting,
    isPutSuccessful,
    putError,
  } = useAspidaCaller(client.people._id(1));

  const handlePutClick = async () => {
    await put({ body: { name: "hoge" } }).catch((err) => null);
  };

  return (
      <Form>
        <Button isLoading={isPutting} onClick={handlePutClick}>Put Value</Button>
        {
          putError && <ErrorMessage>{putError.message}</ErrorMessage>
        }
        {
          isPutSuccessful && <SuccessMessage>送信に成功しました</SuccessMessage>
        }
      </Form>
  );
};

aspida가 정의한 API 대상을 useAspidaCaller 로 전달하면 호출 방법과 불러오기, 성공 표시와 오류 대상이 되돌아옵니다.각종 태그와 오류 대상의 내용은 호출 방법의 실행에 따라 달라집니다.
예를 들어 Submit 포맷에서 요청을 제출하기 위해 각자useState 상태에서 불러오기와 오류를 관리하는 상황에서 코드는 더욱 선언적이고 간단할 수 있다.

특징 ② aspida를 사용하여 요구와 응답이 안전해진다

전절의 특징만 있다면react-use의useAsyncFn 등 특징은 변하지 않는다.
그러나 본 프로그램 라이브러리의 특별한 점은 aspida의 사용이 요구와 응답을 더욱 안전하게 하는 데 있다.
API에서 aspida 쌍/people/{id}을 사용하여 PUT 요청을 정의하는 경우

export type Methods = {
  put: {
    reqBody: {
      name: string;
    };
    resBody: {
      status: number;
    };
  };
};

useAspidaCaller에서 되돌아오기put 방법은 지정한 요청 주체의 유형에 따라 호출되지 않으면 유형 오류가 발생합니다.

  const handlePutClick = async () => {
    //                ↓ここがname以外のキー名だったり、string以外を渡しているとエラーとなる
    await put({ body: { name: "hoge" } }).catch((err) => null);
  };

③ aspida가 정의한 HTTP 동작에 따라 반환 값이 다릅니다.

앞의 예에서put방법을 정의했기 때문에useAspidaCaller의 반환값도put와 관련된 변수이다.

  const {
    put,
    isPutting,
    isPutSuccessful,
    putError,
  } = useAspidaCaller(client.people._id(1));

그러나 HTTP 동작은 같은 종점에 PUT를 정의할 수 있을 뿐만 아니라 POST, DELETE, GET 등도 정의할 수 있다.
따라서 원시 API 정의에서 POST가 정의되면 useAspidaCaller의 반환값도 post과 관련된 변수로 되돌아온다.

export type Methods = {
  post: {
    reqBody: {
      name: string;
    };
    resBody: {
      status: number;
    };
  };
};

원래 API 정의에서 POST, PUT, DELETE를 정의할 때useAspidaCaller의 반환 값은 해당하는 모든 반환 값을 반환합니다.

  const {
    post,
    isPosting,
    isPostSuccessful,
    postError,
  } = useAspidaCaller(client.people._id(1));

export type Methods = {
  post: {
    reqBody: {
      name: string;
    };
    resBody: {
      status: number;
    };
  };
  put: {
    reqBody: {
      name: string;
    };
    resBody: {
      status: number;
    };
  };
  delete: {
    reqBody: {};
    resBody: {
      status: number;
    };
  };
};

예를 들어 원래 API 정의에 PUT가 없으면 put나 isPutting 등을 사용할 수 없으며 사용하더라도 유형 오류가 발생할 수 있다.

방법의 해설

해당 HTTP 작업

GET/POST/PUT/DELETE/PATCH를 지원합니다.

반환 값에 대한 설명

put를 예로 들어 설명하다.
키 이름
컨텐트
put
PUT 요청을 useAspidaCaller에 전달된 엔드포인트로 보냅니다.매개변수는 유형 정의와 같습니다.
isPuttingput 실행 방법 기간true.따라서 초기 값은 false입니다.
isPutSuccessfulput 방법을 실행하면 한 번이라도 성공true.초기 값은 false입니다.
putErrorput 실행 방법 실패를 알면 오류 내용을 입력합니다.초기값undefined또한 DELETE 메서드에서만 실행 메서드가 deleteApi 이름으로 반환됩니다.

세부 동작

테스트 코드를 읽으면 상세한 행동을 알 수 있다.
https://github.com/TeXmeijin/use-sender-aspida-hooks/blob/2273ca9a4bdf965e2c02bbd2f1b62f1a7bf4f5fa/src/tests/useAspidaCaller.spec.ts