◆結論

「yarn add qs」しろ。typescript使ってる人は「yarn add @types/qs」しろ。yarn使ってないならnpm使え。帰れバカ。やめちまえ。

使い方は…普通にimportして使え。わかんないならやめちまえ。

★補足

・「hogehoge.com」は実際には「.env」に定義された環境変数だろう。何言ってるかわからないなら無視しろ。

・baseURLでテンプレート文字列使ってるのは、「/api」とかを付け足すため。

◆何が起きたか

ASP.NETでAPIサーバー立てて、HttpGetの口をはやした。画面からaxiosでもってnestedなデータをGETメソッドで送った。[FromQuery]Attributeを指定したclassにbindされなかった。nullになった。一筋の涙が頬を伝った。

◆調査

3分くらい地団駄を踏みながら絶叫しつつ調査をした。以下のページが見つかった。

Did you try something like this ?
y.prop1=value

FromQuery Nested Model Binding

あー…。…うん？

画面から以下の構造なパラメータを渡してGETを叩いた。

interface GetHogeParameter {
   foo: number,
   bar: {
     baz: number
   }
 }

ChromeくんのF12からNetwork開いてクエリを確認した

https://localhost:44304/api/hoge?foo=1&bar=%7B%22baz%22:2%7D

わっざ？

このページでURLデコードした。

https://localhost:44304/api/hoge?foo=1&bar={"baz":2}

おーーー！（歓喜）（殺意）

◆変えよう

「axios nested params」でググったら以下のissueを発見。

Get with nested JSON params

以下のコメントを発見。

https://github.com/axios/axios/issues/738#issuecomment-412905574

// Format nested params correctly
axios.interceptors.request.use(config => {
  window.console.log(config);
  config.paramsSerializer = params => {
    // Qs is already included in the Axios package
    return Qs.stringify(params, {
      arrayFormat: "brackets",
      encode: false
    });
  };
  return config;
});

はいはい。qsを弄ればいいのね。qsを見に行こう。

ljharb/qs

「dot」とページ検索した結果、以下を発見。

Option allowDots can be used to enable dot notation:
var withDots = qs.parse(‘a.b=c’, { allowDots: true });
assert.deepEqual(withDots, { a: { b: ‘c’ } });

「あーーーーーー♨」と言いながら処理をかませた結果「結論」のコードに至った。画面からもっかいAPI叩いた。

https://localhost:44304/api/hoge?foo=1&bar.baz=2

クラスにちゃんとバインドされた。終わり！閉廷！

◆注意

さっきのaxiosのIssueコメントに

UPDATE 2019-07-26: Qs is no longer part of the axios package, so you will need to add this to your package.json if you want this to work.

とか書かれてたから、qsはちゃんと自分でaddしてくれや。

◆結論（にかいめ）

ネストしてるやーつの標準を定めろ無能ども。