Tweet
Tweet

Slide 1

Slide 1 text

Apollo Client useFragment @Quramy 2022.08.31 #GraphQLTokyo LT

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

AC Roadmap IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDMJFOUCMPCNBJO30"%."1NE

Slide 4

Slide 4 text

useFragment ͱ Colocation

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

@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 }

Slide 15

Slide 15 text

@defer Directive

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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