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