はじめに

みなさん、こんにちは 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に飛ばしてくれます