axiosのparamsに階層の深いネストしたオブジェクトを渡したい

表題どおり

paramsにネストの深いオブジェクトを設定してGETメソッドでサーバーとやりとりしたかった。

普通にやるとJSONにされるのでサーバーで受け取ったとき string になってしまってオブジェクトとして取り扱えない。

qsを使ってparamsSerializerに設定する

github.com

qsはこれ

github.com

  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },

  // `paramsSerializer` is an optional function in charge of serializing `params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  }

axiosのリポジトリから引用

てな具合なので、実際の感じはこう

const config = {
        method: 'get',
        params: { deepObject, tooDeepObject, deeeeeeeeeepObject },
        paramsSerializer(params) {
          return qs.stringify(params)
        },
        responseType: 'json'
      }

      const fetch = await axios('/hogehoge', config)
      return fetch

POSTメソッドの場合は『application/x-www-form-urlencoded』

• https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format

axiosのREADMEの"Using application/x-www-form-urlencoded format"の項を参照して同じくqsを使えばOK