【小ネタ】Inertiaのrouter.getで送るデータがそこそこ複雑になったときどうする？

はじめに

Inertiaで作ってるときに、「検索画面」を作ることがあると思うんですよ。
で、検索条件をサーバーに送るとき、特にデータを書き換えたりするわけではないので正気だったらGETで送ると思うんですよね。
1階層のフォームだったらそのまんま送ってなんとかなるんですけど、ちょっと複雑になるとクエリーパラメータの制約上おかしなデータが送られてきてしまいます。

要は

例: 複雑なデータ

const {data, setData, get} = useForm({
    hoge: [
        {
            huga: '',
            hugahuga: ''
        },
        {
            huga: '',
            hugahuga: ''
        }
    ]
})

const onSubmit = (e) => {
    e.preventDefault()
    get(route('moga'), data)
}

みたいにすると

?hoge[][huga]=&hoge[][hugahuga]=&hoge[][huga]=&hoge[][hugahuga]=

って感じなって、実際Laravel側で受け取ると

[
    'hoge' => [
        ['huga' => ''],
        ['hugahuga' => ''],
        ['huga' => ''],
        ['hugahuga' => ''],
    ]
]

という感じになってしまって、意図したものとちゃうなあ、ってことになります。

そうなっちまったときの対応策です。

結論

transformしてJSON.stringifyする。

const {data, setData, get, transform} = useForm({
    hoge: [
        {
            huga: '',
            hugahuga: ''
        },
        {
            huga: '',
            hugahuga: ''
        }
    ]
})

const onSubmit = (e) => {
    e.preventDefault()
    transform(data => {
      return {
        hoge: JSON.stringify(data)
      }
    })
    get(route('moga'))
}

useFormの中にtransformと言うメソッドがいるので、それを使います。

もちろん、Laravel側の受けの方でも decord_json する必要があります。
Requestクラスがもってる色々便利なメソッドは使えないですが、なんとかする方法はいくらでもあるので大丈夫だと思います。

$hoge = json_decode($request->input('hoge'));

/**
 * $hoge = [
 *     [
 *         'huga' => '',
 *         'hugahuga' => ''
 *     ],
 *     [
 *         'huga' => '',
 *         'hugahuga' => ''
 *     ],
 * ]
 * /