Upgrade to Pro — share decks privately, control downloads, hide ads and more …

20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話

20年続いているサービスの複雑な注文画面を GraphQL を使って改善した話

株式会社出前館

October 27, 2022
Tweet

More Decks by 株式会社出前館

Other Decks in Technology

Transcript

  1. 20年続いているサービスの
    複雑な注文画面を
    GraphQLを使って改善した話
    株式会社出前館・橋本茉利奈

    View full-size slide

  2. 橋本茉利奈
    Hashimoto Marina
    株式会社出前館
    モバイルアプリエンジニア

    View full-size slide

  3. 出前館アプリ

    View full-size slide

  4. 注文画面

    View full-size slide

  5. お届け時間

    View full-size slide

  6. お届け時間
    決済方法

    View full-size slide

  7. お届け時間
    決済方法
    クーポン利用

    View full-size slide

  8. お届け時間
    決済方法
    クーポン利用
    LINEポイント

    View full-size slide

  9. お届け時間
    決済方法
    クーポン利用
    LINEポイント
    特典の付与

    View full-size slide

  10. お届け時間
    決済方法
    クーポン利用
    LINEポイント
    特典の付与
    料金の再計算

    View full-size slide

  11. お届け時間
    決済方法
    クーポン利用
    LINEポイント
    特典の付与
    料金の再計算
    めっちゃ切り替わる…😵

    View full-size slide

  12. 状態管理が大変…😵

    View full-size slide

  13. 状態管理が大変…😵
    • 画面内に状態を管理しなければいけない要素が多い
    • 増え続ける決済パターン
    • ユーザ操作によって切り替わる注文情報
    • ユーザへの許諾チェックボックスの表示制御 …etc

    View full-size slide

  14. どうする…🤔

    View full-size slide

  15. とにかくシンプルを目指す

    View full-size slide

  16. RecoilをState管理に使ってみた
    • ねらい:State管理をできるだけシンプルにする
    • 要素をできるだけ細かく分解して管理する
    • Stateをどこからでも呼び出せる

    View full-size slide

  17. 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

    View full-size slide

  18. 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

    View full-size slide

  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
    依存関係が多すぎる…😵

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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
    頻繁に更新される…😵

    View full-size slide

  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
    かえって複雑に…😵

    View full-size slide

  24. どうする…🤔

    View full-size slide

  25. 状態を2種類にわける

    View full-size slide

  26. Server Cache / Local State

    View full-size slide

  27. Server Cache
    • サーバの情報を保持するキャッシュ
    • サーバとクライアントの情報の一致が常に保証されている
    • キャッシュの値がコンポーネントへリアクティブに作用する

    View full-size slide

  28. Local State
    • クライアントでのユーザ操作による情報を管理するState
    • クライアントのみで一時的に保持している値を管理

    View full-size slide

  29. screen
    Server Cache / Local State
    Server
    user input
    Server Cache
    Local State

    View full-size slide

  30. 注文画面で実装する💪

    View full-size slide

  31. 注文画面で実装する💪
    • Server Cache → Apollo Client のキャッシュを使う
    • Local State → React useState を使う

    View full-size slide

  32. screen
    注文画面で実装する💪
    Apollo Server
    (BFF)
    user input
    Apollo Client Cache
    useState

    View full-size slide

  33. 注文画面で実装する💪
    • Server Cache → Apollo Client のキャッシュを使う
    • Local State → React useState を使う

    View full-size slide

  34. Server Cache→ apollo client のキャッシュを使う
    • BFFのレスポンス情報自体を、Server Cacheとして保持する
    • BFF (GraphQL) によって、1画面描画のためのリクエストが1回で
    済むのでServer Cacheの状態管理が容易
    • BFFのスキーマで型定義できる

    View full-size slide

  35. 注文画面で実装する💪
    • Server Cache → Apollo Clientのキャッシュを使う
    • Local State → React useState を使う

    View full-size slide

  36. Local State → React useState を使う
    • Server Cacheのおかげで、Localで独自に定義するStateを減らすこと
    ができる

    View full-size slide

  37. 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

    View full-size slide

  38. screen
    After...
    Apollo Server
    (BFF)
    user input
    Apollo Client Cache
    useState
    isEnabled
    address
    payment
    method

    View full-size slide

  39. まとめ
    • 注文画面は、出前館アプリの中でも状態管理が大変な画面のひとつ
    • まずRecoilで管理する方法を試したものの、膨大な量のStateを管
    理しなければならず、大変なことに...

    View full-size slide

  40. まとめ
    • そこで、画面で管理するStateをSever CacheとLocal Stateの2種類に
    分類して管理することにした

    View full-size slide

  41. まとめ
    • Server Cacheとして, Apollo Client のキャッシュを活用することで
    、型安全で、かつシンプルにサーバ情報を保持できるようになった

    View full-size slide

  42. まとめ
    • Server Cacheがあるおかげで、ユーザ操作によって更新がかかる
    StateのみをLocal Stateで管理すれば良くなった

    View full-size slide