camelCase props and snake_case in forms

[oski646]

Hi everyone!

I've been looking for a way to handle the transformation of props between the backend (in our case Rails) and the frontend using Inertia.js, but I haven't come across a built-in solution yet. So, I wanted to share an idea and also ask if anyone has figured out a solution.

The challenge I'm facing is that all the props sent from the Rails backend to the frontend are manually "camelized." I believe that this transformation should be handled on the frontend side rather than the backend.

In Axios, there's a really useful feature called "interceptors" that allows you to manipulate requests or responses before they are processed by your code. I imagine something similar for Inertia, where I could modify the props — converting them to camelCase for GET requests and snake_case for everything else. Below is an example of how I currently achieve this using custom interceptors in Axios.

  axiosInstance.interceptors.request.use((config) => {
    if (config.data) {
      config.data = snakecaseKeys(config.data, { deep: true })
    }
    if (config.params) {
      config.params = snakecaseKeys(config.params, { deep: true })
    }
    return config
  })

  axiosInstance.interceptors.response.use(
    (response) => {
      response.data = camelcaseKeys(response.data, {
        deep: true,
      })
      return response
    },
    (error) => {
      error.response.data = camelcaseKeys(error.response.data, { deep: true })
      return Promise.reject(error)
    },
  )

Has anyone else faced this issue or found a workaround? I'd appreciate any advice or suggestions! Thanks!