社内LT

配列にクエリを含める

Transcript

1. クエリパラメータに配列を含めたい
2. 自己紹介 名前：難波智貴 チーム：Cosmos 基盤 技術：Go TypeScript React GCP 趣味：食べること → 運動 (30 ↓ 20 ↑ 3↓)
3. 今回のターゲット • 今まで GraphQL をメインで開発していてREST よくわからん • BE メインでFE のことよくわからんん
4. クエリパラメータ : サーバーに送りたいデータを URLに付与する https://www.example.com/search ? q=test & sort=desc • ?：クエリパラメータが始める • key=value：クエリパラメータ • &：複数のクエリパラメータを区切る
5. 配列をクエリパラメータに含めたいとき
6. 配列のクエリパラメータの例 1. id=1,2,3 2. id[]=1&id[]=2 3. id[1]=1&id[2]=2 4. FE側で配列をエンコードして文字列で送る BE 側の修正が必要
7. FE都合でBEの実装を 変えたくない
8. qs：クエリパラメータの keyをいい感じに変換してくれる http://localhost:8001/todos?labelIDs[]=1&labelIDs[]=2&labelIDs[]=3 http://localhost:8001/todos?&limit=10&labelIDs=1&labelIDs=2&labelIDs=3 ライブラリ使用前 ライブラリ使用後
9. Axios に設定
10. ライブラリ使用前 ライブラリ使用後 BE 動作確認
11. GraphQLのデータ取得 (余談) https://api.example.com/graphql
12. まとめ • REST で クエリパラメータのクエリパラメータは key-value の 関係なので配列を送りたいときは注意が必要 • qs ライブラリ使ってみてね
13. まとめ