axiosで同じキーのクエリ文字列を複数送信する方法

axiosを使用して同じキーを複数回指定すると、クエリ文字列のキーにかぎかっこ（[]）が付いてしまい、意図した通りのキーになりませんでした。この問題を解決する方法を紹介します。

例えば、SpringのPageableにSort情報を複数渡す場合を考えます。

以下のように、axiosのparamsにstringの配列として渡した場合、sort[]というキーでクエリ文字列に追加されました。

axios.get('/users', {
  params: {
    page: 0,
    size: 50,
    sort: ['id,ASC', 'name,DESC'],
  },
});
// /users?page=0&size=50&sort[]=id,ASC&sort[]=name,DESC

“sort[]” ではPageableに正しく反映されないため、”sort” にする必要があります。

そこで、URLSearchParamsを使用する方法を紹介します。URLSearchParamsを使用すると、同じキーを複数回指定することができます。

以下のように、URLSearchParamsを使用してパラメーターを作成し、axiosのparamsに設定します。

const params = new URLSearchParams();
params.append('page', '0');
params.append('size', '50');
params.append('sort', 'id,ASC');
params.append('sort', 'name,DESC');

axios.get('/users', {
  params: params,
});
// /users?page=0&size=50&sort=id,ASC&sort=name,DESC

これで、同じキーを複数回指定することができ、正しい値が反映されたクエリ文字列を生成することができます。

クエリ文字列のパラメーターを受け取るSpringのControllerのメソッドは以下のようになっています。

@GetMapping("/users")
public List<User> getUsers(@PageableDefault(size = 50, page = 0, sort = "id,ASC") Pageable pageable) {
  return userService.getUsers(pageable);
}