ReactとGraphQLで実現する宣言的データフェッチ

by KazukiHayase

Slide 1

Slide 1 text

ReactͱGraphQLͰ࣮ݱ͢Δ એݴతσʔλϑΣον 2022.10.27 ReactΛ΋ͬͱޠΓ͍ͨʂ

Slide 2

Slide 2 text

ࣗݾ঺հ ˕ 2021೥4݄ Buysell Technologiesೖࣾ ˕ ϑϩϯτΤϯυΤϯδχΞ ˕ React / TypeScript / Go / GraphQ L ˕ झຯ ○ ϚϯΨɺݸਓ։ൃ 2 ૣ੉ ࿨ً

Slide 3

Slide 3 text

ΞδΣϯμ ˕ GraphQL ˕ Fragment Colocation ˕ ·ͱΊ 3

Slide 4

Slide 4 text

1 . GraphQL 4

Slide 5

Slide 5 text

GraphQLͱ͸ ˕ Web APIͷن֨ ˕ APIͷ࢓༷ΛεΩʔϚݴޠͰఆٛ ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ 5

Slide 6

Slide 6 text

GraphQLͰͷAPI௨৴ͷྫ 6 Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/

Slide 7

Slide 7 text

7 GraphQLͷجຊߏจ 7 Quer y ˕ σʔλΛऔಘ͢ΔͨΊͷߏจ ˕ RESTͷGETʹ૬౰ ˕ QueryͱϨεϙϯεͷߏ଄͕Ұக

Slide 8

Slide 8 text

8 Queryͷྫ 8 ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ

Slide 9

Slide 9 text

9 GraphQLͷجຊߏจ 9 Fragmen t ˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ ˕ QueryͷதͰల։ͯ͠࢖༻ ˕ σʔλऔಘࣗମ͸Query͕ߦ͏

Slide 10

Slide 10 text

GraphQLͷಛ௃ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 10

Slide 11

Slide 11 text

GraphQLͷಛ௃ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 11

Slide 12

Slide 12 text

GraphQLΛ࢖͏͜ͱͰ ඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ 12

Slide 13

Slide 13 text

ReactͷએݴతUIͱ૬ੑ͕͍͍ UI΋σʔλཁ݅΋એݴతʹѻ͑Δ 13

Slide 14

Slide 14 text

2 . Fragment Colocation 14

Slide 15

Slide 15 text

Fragment Colocationͱ͸ ˕ UIͱσʔλཁ݅ΛηοτͰ؅ཧ͢Δͱ͍͏ߟ͑ํ ˕ ComponentͰ࢖༻͢ΔσʔλΛFragmentͰఆٛ͢ Δ ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ 15

Slide 16

Slide 16 text

16 Ϣʔβʔϖʔδͷྫ 16 ˕ Ϣʔβʔ৘ใ ˕ ϢʔβʔͷλεΫҰཡ

Slide 17

Slide 17 text

17 Componentͷ֊૚ߏ଄ 17 ˕ UserPag e ○ UserInf o ○ TaskList UserPage UserInfo TaskList

Slide 18

Slide 18 text

UserInfo 18 UserPage UserInfo TaskList

Slide 19

Slide 19 text

UserInfo 19 UserPage UserInfo TaskList Fragmentఆٛ

Slide 20

Slide 20 text

UserInfo 20 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ

Slide 21

Slide 21 text

TaskList 21 UserPage UserInfo TaskList

Slide 22

Slide 22 text

TaskList 22 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ

Slide 23

Slide 23 text

UserPage 23 UserPage UserInfo TaskList

Slide 24

Slide 24 text

UserPage 24 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ

Slide 25

Slide 25 text

UserPage 25 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ

Slide 26

Slide 26 text

UserPage 26 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ QueryͰऔಘͨ͠σʔλ ΛࢠComponentʹ౉͢

Slide 27

Slide 27 text

શମ૾ 27 TaskList UserPage UserInfo ComponentͱGraphQLͷ֊૚ߏ଄͕Ұக

Slide 28

Slide 28 text

Fragment ColocationͷϝϦοτ σʔλཁ݅΋ؚΊͯ  ComponentΛΧϓηϧԽͰ͖Δ 28

Slide 29

Slide 29 text

࠶ར༻͕Մೳ ຤୺ͷComponentͰߦ͍ͬͯ Δͷ͸σʔλཁ݅ͷએݴͷΈ Ͱɺσʔλͷऔಘ͸ߦ͍ͬͯ ͳ͍ͷͰෳ਺ͷComponent  ͔Βར༻͕Մೳ σʔλཁ݅΋ؚΊͨComponentͷΧϓηϧԽ Өڹൣғ͕ด͍ͯ͡Δ ຤୺ͷComponentʹमਖ਼Λ  Ճ͑ͯ΋ݺͼग़͠ݩͷ Component͸मਖ਼͸ෆཁ 29

Slide 30

Slide 30 text

30 Ϣʔβʔϖʔδͷྫ 30 ˕ Ϣʔβʔ৘ใʹ߲໨Λ௥Ճ ˕ λεΫҰཡʹมߋ͸ͳ͠ ߲໨Λ௥Ճ

Slide 31

Slide 31 text

31 UserInfoͷ࣮૷ 31 ˕ FragmentʹϑΟʔϧυΛ௥Ճ ˕ ද߲ࣔ໨Λ௥Ճ ˕ Propsͷมߋ͸ͳ͠ ௥Ճ ௥Ճ

Slide 32

Slide 32 text

32 UserPageͷ࣮૷ 32 ˕ มߋՕॴ͸ͳ͠ ˕ ࢠComponentͷมߋ͕  ਌Componentʹ͸Өڹ͍ͯ͠ͳ͍

Slide 33

Slide 33 text

3 . ·ͱΊ 33

Slide 34

Slide 34 text

·ͱΊ ˕ GraphQLͰ͸σʔλϑΣον͕ॊೈʹߦ͑Δ ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ  ఆٛͰ͖Δ ˕ ComponentͱFragmentΛηοτͰ؅ཧ͢Δ͜ͱͰ σʔλཁ݅΋ؚΊͯΧϓηϧԽͰ͖Δ 34

Slide 35

Slide 35 text

35 XFBSFIJSJOH όΠηϧͰ͸   ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠   ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻