It is often the case that variables are declared in CamelCase in the front-end environment, while they are described in SnakeCase on the server side.
To absorb this discrepancy, this section explains how to convert a CamelCase JSON object to SnakeCase when sending it from the front end to the server, and how to convert a SnakeCase JSON object to CamelCase when receiving the server’s response.

What’s snakecase and camelcase ?

Snake case is a notation in which words are joined by underscores_, as in java_script_language.
There are two types of camel case: upper camel case and lower camel case.
The upper camel case has the first letter of each word capitalized, as in JavaScriptLanguage, while the lower camel case has the first letter of each word capitalized, as in JavaScriptLanguage.
Lower Camel Case is like javaScriptLanguage, where the first letter of the second and subsequent words is capitalized.
SnakeCase is called this because it looks like a snake and CamelCase looks like a camel’s hump.
As an aside, connecting each word with a – (hyphen), as in java-script-language, is called a kebab case. It looks like a skewer.

Specific code

handling with the server by axios, and the process of converting camel case and snake case is handled by lodash.
Since axios provides callbacks before sending to the server and after receiving the response, they are used for the conversion.

const snakeCase = require('lodash.snakecase')
const camelCase = require('lodash.camelcase')

export const mapKeysDeep = (data: any, callback: (value: string, key: string) => {}) => {
  if (isArray(data)) {
    return data.map((innerData: object) => mapKeysDeep(innerData, callback))
  } else if (isObject(data)) {
    return mapValues(mapKeys(data, callback), (val: any) => mapKeysDeep(val, callback))
  } else {
    return data
  }
}

export const mapKeysCamelCase = (data: object) => {
  return mapKeysDeep(data, (_: string, key: string) => camelCase(key))
}

export const mapKeysSnakeCase = (data: object) => {
  return mapKeysDeep(data, (_: string, key: string) => snakeCase(key))
}

// convert to snakecase when browser request
axios.interseptors.request.use((request: any) => {
  if (request.method == 'get') {
    const convertParams = mapKeysSnakeCase(request.params)
    return { ...request, params: convertParams }
  } else {
    const convertedData = mapKeysSnakeCase(request.data)
    return { ...request, data: convertedData }
  }
})

// convert to camelcase when browser receive
axios.interseptors.response.use((response: any) => {
  const { data } = response
  const convertedData = mapKeysCamelCase(data)
  return { ...response, data: convertedData }
},
(error) => {
  const message = 'error message'
  return Promise.reject(message, error)
})

This makes discrepancies between the server side and the front end less of a concern.