Node.jsのライブラリqsを使ってクエリ構築する時にちょっと戸惑ったのでメモ。
ライブラリのインストールはこれ
$ npm install --save @types/qs
クエリに変換する
JSONのオブジェクトstringfyで変換すると下記のようになる。
import qs from 'qs'; const query = qs.stringify({ hogeId: 1, mogeId: 2, }); const uri = `$api/v1/search?${query}`; // api/v1/search?hogeId=1&mogeId=2
そしてJSONオブジェクトのvalueがundefined
の値を変換するとこうなる。
import qs from 'qs'; const query = qs.stringify({ hogeId: 1, mogeId: undefined, }); const uri = `$api/v1/search?${query}`; // api/v1/search?hogeId=1
mogeId
のvalue
はundefined
だったのでパラメータがまるごと削除されている。
undefined を意図してないと挙動に戸惑う
実際に戸惑ったコードはこんな感じ。
import qs from 'qs'; const query = qs.stringify({ hogeId: 1, mogeIds: mogeIds?.join(','), // mogeIds: null | number[], }); const uri = `$api/v1/search?${query}`; // api/v1/search?hogeId=1
null
の値にオプショナルチェーン(?.)でjoin()
させる。
もし、mogeIds
がnull
だった場合はnull
ではなくてundefined
が返ることに注意。
そしてmogeIds: undefined
になった場合は変換の際に省略されることを思い出す。
つまりmogeIds
がnull
だった場合はmogeIds
のクエリパラメータは付与されないことになる。
なんで qs.stringfy が紛らわしいか
と、いうのもvalueがnullだった場合は変換されるから。
import qs from 'qs'; const query = qs.stringify({ hogeId: 1, mogeIds: null }); const uri = `$api/v1/search?${query}`; // api/v1/search?hogeId=1&mogeIds=
単純にオプショナルチェーンとstringifyの仕様を理解しておらず、クエリパラメータが送られてこない現象にぶちあたって少し慌てふためいたりしました。
環境
@types/qs@6.9.7
参考
オプショナルチェーン (?.) – JavaScript – MDN Web Docs
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining
URLを解析するQsを丁寧に説明してみた Zenn / Fujiyamayama
https://zenn.dev/fujiyama/articles/bf26790ed81964
コメント