Apollo Client useFragment

Transcript

1. Apollo Client
   useFragment
   @Quramy 2022.08.31 #GraphQLTokyo LT
   

   View Slide

2. ͓඼ॻ͖
   - ࣗݾ঺հ
   - @Quramy
   - GraphQL Tokyo ΦʔΨφΠβ
   - Web Frontend ΤϯδχΞ
   - ೔ࠒ͸ React (Next.js) / Apollo Client Ͱ͓࢓ࣄͯ͠·͢
   - ࠓ೔࿩͢͜ͱ
   - Apollo Client ͷ Future ͬΆ͍ Feature ͷ࿩Λ͠·͢
   - 2022.08.31 ࣌఺Ͱͷ৘ใͳͷͰɺࠓޙେ͖͘มߋ͞ΕΔՄೳੑ͕͋Γ·͢
   

   View Slide

3. AC Roadmap
   IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDMJFOUCMPCNBJO30"%."1NE
   

   View Slide

4. useFragment ͱ
   Colocation
   

   View Slide

5. https://quramy.medium.com/render-as-you-fetch-incremental-graphql-fragments-70e643edd61e
   

   View Slide

6. Colocation
   ਌$PNQPOFOU
   ࢠ$PNQPOFOU
   ਌2VFSZ
   ࢠ'SBHNFOU
   Colocated Component
   Colocated Component
   React Component Tree GraphQL Composition Tree
   

   View Slide

7. Collocation w/ AC 3.6
   ਌$PNQPOFOU
   ࢠ$PNQPOFOU
   ਌2VFSZ
   ࢠ'SBHNFOU
   Colocated Component
   Colocated Component
   React Component Tree GraphQL Composition Tree
   useQuery
   Fragment Spread
   partial data as props
   

   View Slide

8. Collocation via useFragment
   ਌$PNQPOFOU
   ࢠ$PNQPOFOU
   ਌2VFSZ
   ࢠ'SBHNFOU
   Colocated Component
   Colocated Component
   React Component Tree GraphQL Composition Tree
   useQuery
   Fragment Spread
   partial data as props Cache key
   useFragment
   

   View Slide

9. Example Code
   - https://github.com/Quramy/apollo-client-37-study/pull/1
   -
   

   View Slide

10. useFragment ༗ແʹΑΔҧ͍
    - ࠓ·Ͱ
    - ਌ Component ͕ Query ݁Ռͷ data Λ Apollo Cache ͔Βऔಘ͢Δ
    - Fragment ʹରԠ͢Δ data ͸਌ Component ͕ࢠ Component ΁ prop ͱͯ͠౉͢
    - useFragment
    - ਌ Component ͕ Query ݁Ռͷ data Λ Apollo Cache ͔Βऔಘ͢Δ
    - ࢠ Component ͸ ਌ Component ͔Β Fragment ͷ Cache key ͷΈΛ΋Β͏
    - Fragment ʹରԠ͢Δ data ͸ Component ࣗ਎͕ Apollo Cache ͔Βऔಘ͢Δ
    

    View Slide

11. useFragment ͷಛੑ
    - ਌ -> ࢠ Component ͷ props όέπϦϨʔͰ͸ͳ͘ɺStore ૚͔ΒͷσʔλऔಘͱͳΓɺ
    ݸʑͷ Component ͕ΑΓࣗ཯తʹՔಇ͢Δ͜ͱʹͳΔ
    - React Redux ʹ͓͚Δ useSelector ʹ͍ۙଘࡏ
    - ແବͳมߋݕ஌Λճආ͠΍͍͢
    - ਌ - ࢠ - ଙ ͱ͍͏ Component ֊૚ʹͳ͍ͬͯͨ৔߹ɺதؒ֊૚ͷมߋݕ஌Λͬ͢ඈ͹͠
    ͯɺ຤અ͚ͩ࠶ Render Ͱ͖Δ
    $PNQPOFOU
    Store ( Apollo Cache )
    useFragment
    $PNQPOFOU
    $PNQPOFOU
    

    View Slide

12. Background Query
    - useBackgroundQuery = Apollo Client v3.8 ʹੵ·Ε͍ͯΔ৽ hook.
    ͜ͷ hook ͕ useFragment Λิ׬͢Δɺͱ͍͏ݐͯ෇͚
    https://github.com/apollographql/apollo-client/pull/8783
    - ػೳͷΠϝʔδʢଟ෼ʣ:
    - Redux ΍ pub/sub తͳΞφϩδʔͱͯ͠ཧղͰ͖ͳ͘΋ແ͍͕ɺࠓߋඞཁ͔ʁͱײͨ͡
    HRMͷൃߦٴͼDBDIFߋ৽
    useQuery = useBackgroundQuery + useFragment
    DBDIFσʔλͷߪಡ
    

    View Slide

13. @defer / Suspense
    - v3.7 ʹ @defer, v3.9 Ͱ React Suspense ΁ͷରԠ͕༧ఆ͞Ε͍ͯΔ
    - @defer: Fragment ͷऔಘΛ஗Ԇͤ͞Δ GraphQL ͷ࣮ݧత࢓༷
    - Suspense: Component Λඇಉظॲཧͱڠௐಈ࡞ͤ͞ΔͨΊͷ React v18ͷػೳ
    - @defer ͸ઌ೔ PR Խ͞Ε͍ͯΔ
    https://github.com/apollographql/apollo-client/pull/10018/files
    - ͨͩ͠ɺDeferred ͳ Fragment Λ Component ͔Βར༻͢Δͱ͍͏
    έʔε͕·ͩߟྀ͞Ε͍ͯͳ͍໛༷
    

    View Slide

14. @defer Directive
    - 1 Operation : ෳ਺ ResponseͱͳΔ
    - Fragment ʹ෇༩
    - React ͷ Suspense for data fetch ͱ
    ਌࿨ੑߴ͍(͸ͣ)
    query ProductDetailQuery {
    product(id: 100) {
    id
    name
    imageURL
    ...DeferredPrice @defer
    }
    }
    fragment DeferredPrice on Product {
    specialPrice
    }
    

    View Slide

15. @defer Directive
    

    View Slide

16. @defer ͱ useFragment
    - GraphQL ͷΫΤϦ݁Ռͷ͏ͪɺҰ෦ͷ Fragment ͕஗Ԇ͞ΕΔ৔߹ɺ
    Fragment ຖʹҎԼ͕औಘͰ͖ͳͯ͘͸ͳΒͳ͍
    - ࠓ౸ୡͨ͠ͷ͔Ͳ͏͔ (= ඇಉظͷঢ়ଶ؅ཧ )
    - ౸ୡ͍ͯ͠ΔͷͰ͋Ε͹ɺͦͷσʔλ
    - ͜Ε͸ݱߦͷ useQuery ͚ͩͰ͸೉͍͠͸ͣͰɺuseFragment ্͕هͷ
    ໾ׂΛ୲ͬͯ͘ΕΔ͜ͱΛظ଴͍ͯ͠Δ͕ɺઌ͸·ͩ௕ͦ͏ʁ
    

    View Slide

17. View Slide

18. ·ͱΊ
    - Apollo Client ͸ v4 ʹ޲͚ͯ৭ʑͳػೳ͕࣮૷͞Εͭͭ͋Δ
    - Relay ΍ urql ͳͲͷ Client ϥΠϒϥϦͱൺֱ͢Δͱपճ஗Εؾຯ
    - طʹ Apollo Client Λӡ༻͍ͯ͠ΔͷͰ͋Ε͹ɺࠓͷ͏͔ͪΒ Fragment
    Colocation Λ΍͓͚ͬͯ͹ɺ useFragment ΁ͷஔ͖׵͑ࣗମ͸؆୯ʹ
    Ͱ͖Δ͸ͣ
    

    View Slide