Recommended
More Related Content
What's hot
What's hot (20)
20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話
- 4. 出前館アプリ
- 5. 注文画面
- 7. お届け時間
- 8. お届け時間 決済方法
- 14. 状態管理が大変…😵
- 15. 状態管理が大変…😵 • 画面内に状態を管理しなければいけない要素が多い • 増え続ける決済パターン • ユーザ操作によって切り替わる注文情報 • ユーザへの許諾チェックボックスの表示制御 …etc
- 16. どうする…🤔
- 17. とにかくシンプルを目指す
- 18. RecoilをState管理に使ってみた • ねらい：State管理をできるだけシンプルにする • 要素をできるだけ細かく分解して管理する • Stateをどこからでも呼び出せる
- 19. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
- 20. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
- 21. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 依存関係が多すぎる…😵
- 22. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
- 23. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
- 24. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method 頻繁に更新される…😵
- 25. screen RecoilをState管理に使ってみた Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method かえって複雑に…😵
- 26. どうする…🤔
- 27. 状態を2種類にわける
- 28. Server Cache / Local State
- 29. Server Cache • サーバの情報を保持するキャッシュ • サーバとクライアントの情報の一致が常に保証されている • キャッシュの値がコンポーネントへリアクティブに作用する
- 30. Local State • クライアントでのユーザ操作による情報を管理するState • クライアントのみで一時的に保持している値を管理
- 31. screen Server Cache / Local State Server user input Server Cache Local State
- 32. 注文画面で実装する💪
- 33. 注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local State → React useState を使う
- 34. screen 注文画面で実装する💪 Apollo Server (BFF) user input Apollo Client Cache useState
- 35. 注文画面で実装する💪 • Server Cache → Apollo Client のキャッシュを使う • Local State → React useState を使う
- 36. Server Cache→ apollo client のキャッシュを使う • BFFのレスポンス情報自体を、Server Cacheとして保持する • BFF (GraphQL) によって、1画面描画のためのリクエストが1回で 済むのでServer Cacheの状態管理が容易 • BFFのスキーマで型定義できる
- 37. 注文画面で実装する💪 • Server Cache → Apollo Clientのキャッシュを使う • Local State → React useState を使う
- 38. Local State → React useState を使う • Server Cacheのおかげで、Localで独自に定義するStateを減らすこと ができる
- 39. screen Before... Recoil Server user input item info amount coupon delivery type LINE point order type terms agreement isEnabled receipt address phone number payment method
- 40. screen After... Apollo Server (BFF) user input Apollo Client Cache useState isEnabled address payment method
- 41. まとめ
- 43. まとめ • そこで、画面で管理するStateをSever CacheとLocal Stateの2種類に 分類して管理することにした
- 44. まとめ • Server Cacheとして, Apollo Client のキャッシュを活用することで 、型安全で、かつシンプルにサーバ情報を保持できるようになった
- 45. まとめ • Server Cacheがあるおかげで、ユーザ操作によって更新がかかる StateのみをLocal Stateで管理すれば良くなった