Как заставить Axios хорошо работать с Rails API

В последнее время я работал над приложением React, которое поддерживает Rails API, и одна вещь, которая меня раздражает, - это то, что Javascript и Rails имеют разные соглашения об именах для переменных.

# In rails snake case is the way to go
params = {
  first_name: "Mike",
  last_name: "Parton"
}
// But in javascript camel case is preferred
params = {
  firstName: "Mike",
  lastName: "Parton"
}

Чтобы мое приложение React могло взаимодействовать с API, эти параметры должны быть одинаковыми. Я мог бы просто попробовать не забыть использовать snake case для всех связанных с API переменных в моем Javascript, но в какой-то момент я неизбежно допущу ошибку.

Есть лучшее решение.

Я использую Axios в качестве своего http-клиента, потому что у него отличный API и несколько хороших опций для настройки. Когда вы создаете клиент Axios, вы можете передавать свои собственные функции для преобразования данных, входящих и исходящих из вашего API. Используя библиотеку утилит горбы, легко убедиться, что данные, поступающие с рельсов, преобразуются в футляр для верблюда, а все почтовые данные отправляются в виде футляра для змей.

import axios from 'axios'
import humps from 'humps'
const api = axios.create({
  baseURL: YOUR_API_ENDPOINT_HERE,
  transformResponse: [
    ...axios.defaults.transformResponse,
    data => humps.camelizeKeys(data)
  ],
  transformRequest: [
    data => humps.decamelizeKeys(data),
    ...axios.defaults.transformRequest
  ]
})

Axios поставляется со своими собственными функциями преобразования, которые также необходимо применить. Порядок важен, чтобы гарантировать, что наши преобразования не выполняются в строковом объекте данных.

Благодаря этой настройке я теперь могу использовать свой API и никогда не беспокоиться о соглашениях об именах Rails в моем Javascript.