axiosで、GETリクエストのパラメータにObject型を含むことができたら便利なのにと考えました。

axiosでは、paramsSerializerオプションを設定すると、クエリパラメータをObject型で取得することが可能になります。

オプションを設定せずに、送信すると、、、

例えば、記事を検索するAPIで、キーワードを"hoge"、カテゴリーを"interview", "column"で絞り込みたいときに、以下のようにクエリパラメータを使ってカテゴリーをObject型で指定してリクエストが送ろうとすると・・・

import axios from 'axios';

const url = 'http://localhost/api/posts/search';

const params = {
  word: 'hoge',
  category: {
    $in: ['interview', 'column'],
  },
};

axios.get(url, { params });

結果： categoryがObject型→String型に変換されてしまう。

GET /api/posts/search?word=hoge&category=%7B%22$in%22:[%22interview%22,%22column%22]%7D

> console.log(req.query);
  {
     word: 'hoge',
     category: '{"$in":["interview","column"]}'
  }

こうなると、サーバーサイドで受け取ったあとに、JSON.parseしてObject型に戻さなければならない。

しかし、そんなことをしなくても、axiosにはパラメータにObject型を利用できるオプションがある。

paramsSerializerオプションを設定

import axios from 'axios';
import qs from 'qs';

const url = 'http://localhost/api/posts/search';

const params = {
  word: 'hoge',
  category: {
    $in: ['interview', 'column'],
  },
};

const paramsSerializer = (params) => qs.stringify(params);

axios.get(url, { params, paramsSerializer });

クエリパラメータでは、一度JSON文字列に変換する必要があり、paramsSeriailizerオプションでは、どのような形のJSON文字列に変換するかを設定できます。

今回はJSON文字列に変換するのに、qsというモジュールを使用しました。

実行結果は、以下のようになりました。

GET /api/posts/search?word=hoge&category%5B%24in%5D%5B0%5D=interview&category%5B%24in%5D%5B1%5D=column

> console.log(req.query);
  { word: 'hoge',
    category: { '$in': [ 'interview', 'column' ] }
  }

paramsSeriailizerを指定したことで、API側ではObject型で取得することができます。
このオプジョンを使えば柔軟なAPIを簡単に作成することができそうです。