Apollo Client useFragment

Yosuke Kurami

August 31, 2022

Tweet Share

Transcript

1. Apollo Client useFragment @Quramy 2022.08.31 #GraphQLTokyo LT

2. ͓඼ॻ͖ - ࣗݾ঺հ - @Quramy - GraphQL Tokyo ΦʔΨφΠβ -

   Web Frontend ΤϯδχΞ - ೔ࠒ͸ React (Next.js) / Apollo Client Ͱ͓࢓ࣄͯ͠·͢ - ࠓ೔࿩͢͜ͱ - Apollo Client ͷ Future ͬΆ͍ Feature ͷ࿩Λ͠·͢ - 2022.08.31 ࣌఺Ͱͷ৘ใͳͷͰɺࠓޙେ͖͘มߋ͞ΕΔՄೳੑ͕͋Γ·͢

3. AC Roadmap IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDMJFOUCMPCNBJO30"%."1NE

4. useFragment ͱ Colocation

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

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

   Component Tree GraphQL Composition Tree

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

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

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

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 ͔Βऔಘ͢Δ

11. useFragment ͷಛੑ - ਌ -> ࢠ Component ͷ props όέπϦϨʔͰ͸ͳ͘ɺStore

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

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
    σʔλͷߪಡ

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 ͔Βར༻͢Δͱ͍͏ έʔε͕·ͩߟྀ͞Ε͍ͯͳ͍໛༷

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 }

15. @defer Directive

16. @defer ͱ useFragment - GraphQL ͷΫΤϦ݁Ռͷ͏ͪɺҰ෦ͷ Fragment ͕஗Ԇ͞ΕΔ৔߹ɺ Fragment ຖʹҎԼ͕औಘͰ͖ͳͯ͘͸ͳΒͳ͍

    - ࠓ౸ୡͨ͠ͷ͔Ͳ͏͔ (= ඇಉظͷঢ়ଶ؅ཧ ) - ౸ୡ͍ͯ͠ΔͷͰ͋Ε͹ɺͦͷσʔλ - ͜Ε͸ݱߦͷ useQuery ͚ͩͰ͸೉͍͠͸ͣͰɺuseFragment ্͕هͷ ໾ׂΛ୲ͬͯ͘ΕΔ͜ͱΛظ଴͍ͯ͠Δ͕ɺઌ͸·ͩ௕ͦ͏ʁ
17. None

18. ·ͱΊ - Apollo Client ͸ v4 ʹ޲͚ͯ৭ʑͳػೳ͕࣮૷͞Εͭͭ͋Δ - Relay ΍

    urql ͳͲͷ Client ϥΠϒϥϦͱൺֱ͢Δͱपճ஗Εؾຯ - طʹ Apollo Client Λӡ༻͍ͯ͠ΔͷͰ͋Ε͹ɺࠓͷ͏͔ͪΒ Fragment Colocation Λ΍͓͚ͬͯ͹ɺ useFragment ΁ͷஔ͖׵͑ࣗମ͸؆୯ʹ Ͱ͖Δ͸ͣ