リストをクエリパラメータに変換

今回は、リストをクエリパラメータとしてリクエストするときに変換する方法について見ていきたいと思います。

リストのクエリパラメータでリクエスト時にリストにマッピングできない理由を調べた時のメモです。

問題

    const axiosConfig = axios.create({
      baseURL: baseUrl,
      headers: headers,
      withCredentials: true,
      params: data,
    });

• axios.createを使用し、ヘッダーなどをセットします。
• params:ここにクエリパラメータをセットします。
  • objectまたはURLSearchParamsである必要が有ります。

dataはリストが含まれているObjectです。その時、上記のようにしたら「sampleList[] = “0”&sampleList[]= “1”」のようにセットされることがわかりました。

解決

    const transformRequestOptions = (params: any) => {
      let options = "";
      Object.entries<any>(params).forEach(([key, value]) => {
        if (typeof value !== "object" && value) {
          options += `${key}=${value}&`;
        } else if (Array.isArray(value)) {
          value.forEach((el) => {
            options += `${key}=${el}&`;
          });
        }
      });
      return options ? options.slice(0, -1) : options;
    };

    const axiosConfig = axios.create({
      baseURL: "/localhost/sample/",
      headers: headers,
      withCredentials: true,
      paramsSerializer: (params) => {
        return transformRequestOptions(params);
      },
    });

• paramsSerializer：オプションを設定することでクエリパラメータのシリアライズのフォーマットをカスタマイズすることができます。
• transformRequestOptions：paramsからクエリパラメータの文字列への変換をおこないます。
  • リストの場合は、「sampleList=”0″&sampleList=”1″」のように変換を行います。