React × TypeScript でGETリクエスト時のクエリパラメータに配列を渡す方法

前置き

本記事ではReact × TypeScript でGETリクエスト時のクエリパラメータに配列を渡す方法について記載します。
フィルタリング機能実装時に筆者が苦戦したため備忘録として本記事を作成しました。
再現コードを記載していますが、結論のみ求めている方は修正まで飛んでください。

技術スタック

フロントエンド

• Visual Studio Code
• React (TypeScript)
• Axios

バックエンド

• Eclipse
• Java
• SpringBoot

動作確認

• Google Chrome

バックエンド実装

String型の配列を持つ型Filteringを作成し、引数に設定します。

Java

	@GetMapping("/api/filter")
	public ResponseEntity<Void> filter(Filtering filtering){
		return new ResponseEntity<Void>(HttpStatus.OK);
	}
	
	private record Filtering(String[] array) {}

フロントエンド実装

一旦フロントエンド側でAPIリクエストを行う処理を実装します。

React(TypeScript)

import { useState } from 'react'
import './App.css'
import axios from 'axios';

function App() {
  // メッセージ表示用
  const [message, setMessage] = useState<string>("");

  // onClick動作関数
  const handleClick = async() => {
    // パラメータの作成
    const param = {
      array: ["React", "TypeScript"]
    }

    try{
      // APIリクエスト送信
      await axios.get("http://localhost:8080/api/filter", {
        params: param,
      });
      setMessage("OK");
    }catch(e){
      console.log(e);
      setMessage("ERROR");
    }
  }

  return (
    <div>
        <h1>API Test</h1>
        <button onClick={handleClick}>REQUEST</button>
        {
          message && <div>{message}</div>
        }
    </div>
  )
}

export default App

動作確認

REQUESTボタンを押下しリクエストを送信するとBad Requestエラーが発生します。

原因

送信しているクエリパラメータの形式がfilter?array[]=React&array[]=TypeScriptに対し、許容されているクエリパラメータの形式はfilter?array=React&array=TypeScriptだからです。

修正

APIリクエストを行う処理を修正します。

Raect(TypeScript)

// APIリクエスト送信
await axios.get("http://localhost:8080/api/filter", {
    params: param,
    paramsSerializer: {indexes: null} //←追加
});

paramsSerializerは配列をクエリパラメータとしてURLに変換するときの動作を制御するための設定です。
indexesにはnull, true, falseの値を設定できます。

• null -> array=React&array=TypeScriptの形式に変換
• true -> array[0]=React&array[1]=TypeScriptの形式に変換
• false-> array[]=React&array[]=TypeScriptの形式に変換（デフォルト）

動作確認

APIリクエストが通り、無事にOKと表示されました。

文字列「React」と「TypeScript」を受け取れています。

以上