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

Apollo Client useFragment

Apollo Client useFragment

Yosuke Kurami

August 31, 2022
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. Apollo Client
    useFragment
    @Quramy 2022.08.31 #GraphQLTokyo LT

    View full-size slide

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

    View full-size slide

  3. AC Roadmap
    IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDMJFOUCMPCNBJO30"%."1NE

    View full-size slide

  4. useFragment ͱ
    Colocation

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  15. @defer Directive

    View full-size slide

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

    View full-size slide

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

    View full-size slide