Snake Case vs Camel Case keys

[jonathanmdavies]

Hi there, thanks for the great gem, I'm enjoying getting up to speed with it.

Based on your documentation, I was expecting if I pass through a snake case attribute for it to be serialised in camel case. However, I'm finding that the attributes keys remain in snake-case.

class PostSerializer < BaseSerializer
  attributes :id, :title, :created_at
end

I then call the serializer in the controller:

 def index
    posts = PostSerializer.many(current_account.posts)
    render inertia: 'Posts/Index', props: {
      posts: posts,
    }
  end

However, the json returned to the front-end remains snake case:

[{ created_at: "2023-01-03T15:53:52.425Z", id: 1, title: "Test" }...]

As another data point, when using your types from serializers gem it is generating a camel case type:

export default interface Post {
  id: number
  title?: string
  createdAt: string | Date
}

I'm assuming that I've configured something incorrectly. Any advice would be greatly appreciated. Thanks for your time 🙏

[ElMassimo]

Hi Jonathan!

Not your fault, types_from_serializers incorrectly assumes you will convert the keys to camel case in the client side.

types_from_serializers should add a setting to allow transforming keys instead of assuming this out of the box.

Happy to take a pull request in types_from_serializers to add a camelize_keys config option, which is off by default.

---

If you are using JS, it will be more idiomatic to convert keys to camel case when receiving the JSON.

If you are using Inertia, you can do that by converting the JSON object for props, which is what I'm using in all apps.

Unfortunately Inertia does not provide a way to intercept visits (inertiajs/inertia#1052 seems to have been reverted), but you can achieve that by overriding some internals:

import { Inertia, type Page } from '@inertiajs/inertia'

const router = Inertia as any

const interceptPageCallbackAndCamelize = (fnName: string) => {
  const originalFn = router[fnName]
  router[fnName] = function (page: Page) {
    page.props = deepCamelizeKeys(page.props)
    return originalFn.apply(router, [page])
  }
}

interceptPageCallbackAndCamelize('handleBackForwardVisit')
interceptPageCallbackAndCamelize('handleInitialPageVisit')
interceptPageCallbackAndCamelize('handleLocationVisit')