aspidaでGETパラメータをリクエスト直前にシリアライズする #TypeScript

GETパラメータに配列が含まれているとリクエストに失敗する

SwaggerをTypeScriptに変換してAPIリクエストで型チェックを有効にするという記事の補足です
GET: /pet/findPetsByStatusのリクエストを行うと失敗します
（常に空の配列が返ってくる）

index.ts

import axiosClient from '@aspida/axios'
import api from "./apis/$api"

;(async () => {
  const client = api(axiosClient())
  const pets = await client.pet.findByStatus.$get({ query: { status: ['available', 'pending'] }})
  console.log(pets) // []
})()

原因は、GETパラメータのstatusプロパティにあります

画像の通り、型は 'available' | 'pending' | 'sold'の配列です
@aspida/axiosはaxiosの仕様に則りGETパラメータの配列を&status=[%22available%22,%22pending%22]という形式で送信します

一方で、SwaggerのRequest URLを見ると、&status=available&status=pendingという形式で送信する必要があるとわかります

そこで、aspidaにaxiosの拡張機能を適用してGETパラメータをシリアライズします

qaxiosConfig#paramsSerializerでシリアライズ

設定ファイル

aspida.config.js

module.exports = {
  openapi: {
    inputFile: 'https://petstore.swagger.io/v2/swagger.json'
  }
}

型定義ファイル生成

$ npx openapi2aspida --build

インストール

--save-dev付けるとか付けないとかあるけどとりあえずまとめてインストール

$ npm init -y
$ npm install @aspida/axios axios ts-node @types/node

APIリクエスト

axiosClientの第2引数にaxiosのRequest Configを渡せます

index.ts

import { stringify } from 'querystring'
import axiosClient from '@aspida/axios'
import axios from 'axios'
import api from "./apis/$api"

;(async () => {
  const client = api(axiosClient(axios, { paramsSerializer: (params) => stringify(params) }))
  const pets = await client.pet.findByStatus.$get({ query: { status: ['available', 'pending'] }})
  console.log(pets)
})()

作成したTSファイルを実行するnpmスクリプトを追加

package.json

{
  "scripts": {
    "start": "ts-node index.ts"
  }
}

実行

$ npm start

無事取得できました

まとめ

ブラウザでリクエストする場合はquerystringの代わりにqsをインストールすると良いです
バグとか不足機能があれば日本語でいいのでQiitaのコメントかGitHubのIssueに投稿してください

aspida日本語ドキュメント：https://github.com/aspidajs/aspida/tree/master/packages/aspida/docs/ja