code reading of API handling in bulletproof-react

https://github.com/alan2207/bulletproof-react

REST APIへのリクエスト、エラー処理、State管理などを読んで整理しておく

• 各処理のファイル管理
• ComponentからAPIリクエストのパイプラインを確認
• レスポンスに対するState管理方法
• エラー処理の方法の確認

各処理のファイル管理

ユーザーページの場合は@features/usersにユーザーページに関する処理が全て管理されている

• ルーティング：@features/users/routes
• コンポーネント：@features/users/components
• API処理：@features/users/api

APIリクエストまでのパイプラインの確認

1. @routes/protectedより、usersがルーティング
2. @features/users/routes/Userにてルーティング後のコンポーネントUserLiset呼び出し
3. @features/users/components/UserListが呼び出され、その中でuseUsers()が処理
4. @features/users/api/getUesrs.tsにてuseQuery内でgetUserが呼ばれている
5. UserList内のDeleteUserも同様に、useDeteleUserが呼ばれReact Queryを利用している

レスポンスに対するState管理方法

React Queryでfetchなどもキャッシュを含めて管理し、useMutationでstate変更も処理している

エラーハンドリング

getUesrに関してはエラー処理をしている部分は特に見当たらない。
ただ、useUserからreact-queryにconfigを渡せるようになっていたのでそれを利用することになると思う。
deleteUserではuseMutationのonErrorで実装し、zustandで管理されたNotification Storeに格納している。
Notificationは@components/Notification内でエラーメッセージがコンポーネントとして実装されている。
Notificationコンポーネントは@provider/app内のプロバイダーで呼び出されている