axios-case-converter

Axios transformer/interceptor that converts snake_case/camelCase

• Converts outgoing data params object keys into snake_case
• Converts incoming data object keys into camelCase
• Converts outgoing headers object keys into Header-Case
• Converts incoming headers object keys into camelCase

Installing

NPM

npm install axios-case-converter

[!IMPORTANT]

Axios is a peer dependency of axios-case-converter and must be installed separately.

npm install axios

[!NOTE]

Since v2.0.0 this package is ESM-only and requires Node.js >= 18. Use import (no require()). If you still need CommonJS or older Node.js, stay on the 1.x line.

CDN

<script type="module">
  import applyCaseMiddleware from 'https://esm.sh/axios-case-converter';
</script>

It is strongly recommended that you replace the unversioned URL with a fixed version.

Usage

You can fully use camelCase in your JavaScript codes.

import applyCaseMiddleware from 'axios-case-converter';
import axios from 'axios';

(async () => {
  const client = applyCaseMiddleware(axios.create());
  const { data } = await client.post(
    'https://example.com/api/endpoint',
    {
      targetId: 1,
    },
    {
      params: { userId: 1 },
      headers: { userAgent: 'Mozilla' },
    }
  );

  console.log(data.actionResult.users[0].screenName);
})();

Options

const client = applyCaseMiddleware(axios.create(), options);

preservedKeys: string[] | Function

Disable transformation when the string matched or satisfied the condition.

const options = {
  preservedKeys: ['preserve_this_key_1', 'preserve_this_key_2'],
};

const options = {
  preservedKeys: (input) => {
    return ['preserve_this_key_1', 'preserve_this_key_2'].includes(input);
  },
};

ignoreHeaders: boolean

Disable HTTP headers transformation.

const options = {
  ignoreHeaders: true,
};

ignoreParams: boolean

Disable HTTP URL parameters transformation.

const options = {
  ignoreParams: true,
};

caseFunctions: { snake?: Function, camel?: Function, header?: Function }

Override built-in change-case functions.

const options = {
  caseFunctions: {
    camel: (input, options) => {
      return (input.charAt(0).toLowerCase() + input.slice(1)).replace(
        /[-_](.)/g,
        (match, group1) => group1.toUpperCase()
      );
    },
  },
};

caseOptions: { stripRegexp?: RegExp }

By default, { stripRegexp: /[^A-Z0-9[\]]+/gi } is used as default change-case function options. This preserves [] chars in object keys. If you wish keeping original change-case behavior, override the options.

const options = {
  caseOptions: {
    stripRegexp: /[^A-Z0-9]+/gi,
  },
};

caseMiddleware: { requestTransformer?: Function, responseTransformer?: Function, requestInterceptor?: Function }

Totally override axios-case-converter behaviors.

const options = {
  caseMiddleware: {
    requestInterceptor: (config) => {
      // Disable query string transformation
      return config;
    },
  },
};

Check the tests for more info

Attention

[!NOTE]

Since v2.0.0 the package ships an ES2021 ESM build. Legacy targets such as Internet Explorer cannot execute it directly — you must transpile it (and its dependencies) through your bundler first. The compatibility notes below apply after such transpilation.

[!WARNING]

Object compatibility

If you run on Internet Explorer, you need polyfill for Object.prototype.entries().

• zloirock/core-js: Standard Library

[!WARNING]

FormData compatibility

If you use FormData on Internet Explorer, you need polyfill of FormData.prototype.entries().

• jimmywarting/FormData: HTML5 FormData polyfill for Browsers.

If you use FormData on React Native, please ignore the following warnings after confirming that polyfill is impossible.

// RN >= 0.52
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings([
  'Be careful that FormData cannot be transformed on React Native.',
]);

// RN < 0.52
console.ignoredYellowBox = [
  'Be careful that FormData cannot be transformed on React Native.',
];

[!WARNING]

Symbol compatibility

If you use React Native for Android development, you should use Symbol polyfill from core-js to avoid bugs with iterators:

1. Create polyfill.js in root directory with code:

global.Symbol = require('core-js/es6/symbol');
require('core-js/fn/symbol/iterator');

2. Include polyfill.js in entry point of your app (e.g. app.js):

import { Platform } from 'react-native';

// ...

if (Platform.OS === 'android') {
  require('./polyfill.js');
}

cf. undefined is not a function(evaluating '_iterator[typeof Symbol === "function"?Symbol.iterator:"@@iterator"]()') · Issue #15902 · facebook/react-native