Zenn
😽

axiosのinterceptorを使って、submitするdataを全てスネークケースにする方法

2024/10/25に公開
TypeScript
axios
スネークケース
interceptor
tech

はじめに

みなさん、こんにちは torihaziです

今日は実務でタイトルのことをやる機会があって、

色々と調べたのでそれを書き残そうかと思って今書いてます

経緯

frontendとbackendでキャメルケースかスネークケースかで違うと思います。

frontはuserDataみたいなキャメルで、backはrailsだとuser_dataみたいな

スネークケースですよね。

今までもスネークケースにする処理はfrontでやっていたり、

それか

user_data: {
  name: data.hoge
  age: data.age
  ・・・
}

みたいにしてわざわざベタ書きしている箇所もあり統一性がありませんでした。

後何よりもし保守性がよろしくない。

ということでこれを機に手をつけたというわけです。

どうやるか

import { snakeCase } from "change-case";

const METHOD_WITH_PAYLOAD = ["post", "put"];
type inputType = object | object[]

const convertToSnakeCase = (input: inputType): any => {
  if (Array.isArray(obj)) {
    return obj.map(convertToSnakeCase);
  } else if (obj !== null && typeof obj === "object") {
    return Object.entries(obj).reduce(
      (result, [key, value]) => ({
        ...result,
        [snakeCase(key)]: convertToSnakeCase(value)
      }),
      {}
    );
  }

// api: axiosのinstance
api.interceptors.request.use((config: InternalAxiosRequestConfig) => {

  if (
    config.method &&
    METHOD_WITH_PAYLOAD.includes(config.method.toLowerCase())
  ) {
    config.data = convertToSnakeCase(config.data);
  }

  return config;
}

これをすれば、postかputの時だけ全部勝手にsnakecaseに変換してbackendに飛ばしてくれます

終わりに

以上！

実務でやって初めてこういう変換処理を加えるべきなんだと思いました

まだまだ発展途上です

参考

https://axios-http.com/ja/docs/interceptors

Discussion