tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

api通信の際、引数で受け取った値をそのままリクエストのパラメーターに使用しない

結論

❌ UI層のフォームなどで受け取った値をapiの値として使う
⭕️ 一度 requestBody などの変数に再代入することで、UI側で受け取る値と、apiのパラメーターとして送る値を切り離す

実際に書いたコード

export const signIn = async (
  params: SignInParams,
) => {
  const POST_URL = "hogehoge";
  return await apiClient
    .post(POST_URL, params)    // ☆
    .then((res) => {
      return res.data;
    })
    .catch((e: AxiosResponse<ModelError>) => {
      throw e.data;
    });
};

指摘点

export const signIn = async (
  params: SignInParams,
  apiClient: AxiosInstance = csrApiClient
) => {
  const POST_URL = "hogehoge";
  const requestBody: V1CommunityLogin = {   // 一度別の変数に代入するべし!
    email: params.email,
    password: params.password,
    captchaToken: {
      type: convertCaptchaType2ApiCaptchaType(params.captchaToken.type),
      token: params.captchaToken.token,
    },
  };
  return await apiClient
    .post(POST_URL, requestBody)
    .then((res) => {
      return res.data;
    })
    .catch((e: AxiosResponse<ModelError>) => {
      throw e.data;
    });
};