GraphQLクライアントの技術選定 2023冬

by KazukiHayase

Slide 1

Slide 1 text

GraphQLΫϥΠΞϯτͷٕज़બఆ 2023ౙ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2023 2023.11.18

Slide 2

Slide 2 text

ૣ੉࿨ًʢ@KazukiHayaseʣ ● 2021೥BuySell Technologies৽ଔೖࣾ ● ग़඼؅ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ ● Go / TypeScript / GraphQL / ։ൃੜ࢈ੑվળ

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

● GraphQLΫϥΠΞϯτͷٕज़બఆͷ؍఺ ● GraphQLΫϥΠΞϯτͷ঺հͱൺֱ ࿩͢͜ͱ ● GraphQLʹ͍ͭͯͷৄ͍͠આ໌ ࿩͞ͳ͍͜ͱ

Slide 6

Slide 6 text

ΞδΣϯμ GraphQLʹ͍ͭͯ 01 ٕज़બఆͷ؍఺ 02 GraphQLΫϥΠΞϯτͷൺֱ 03 ۩ମతͳબఆࣄྫ 04

Slide 7

Slide 7 text

01 GraphQLʹ͍ͭͯ

Slide 8

Slide 8 text

● Meta͕։ൃͨ͠Web APIͷن֨ ● APIͷ࢓༷ΛεΩʔϚͰఆٛ ● ΫϥΠΞϯτ͕ඞཁͳσʔλߏ଄Λࢦఆͯ͠औಘՄೳ GraphQLͱ͸

Slide 9

Slide 9 text

● ॊೈͳσʔλϑΣον ● ܕ෇͚͞ΕͨεΩʔϚ ● ڧྗͳΤίγεςϜ ● Fragment Colocation GraphQLͷϝϦοτ

Slide 10

Slide 10 text

● ॊೈͳσʔλϑΣον ● ܕ෇͚͞ΕͨεΩʔϚ ● ڧྗͳΤίγεςϜ ● Fragment Colocation GraphQLͷϝϦοτ

Slide 11

Slide 11 text

ॊೈͳσʔλϑΣον

Slide 12

Slide 12 text

ॊೈͳσʔλϑΣον ඞཁͳσʔλͷΈΛ୯ҰͷϦΫΤετͰऔಘՄೳ ΦʔόʔϑΣον/ΞϯμʔϑΣονͷ๷ࢭ ϞόΠϧͳͲͷ௿଎ωοτϫʔΫͰ΋ߴ଎ʹಈ࡞

Slide 13

Slide 13 text

● ॊೈͳσʔλϑΣον ● ܕ෇͚͞ΕͨεΩʔϚ ● ڧྗͳΤίγεςϜ ● Fragment Colocation GraphQLͷϝϦοτ

Slide 14

Slide 14 text

● υΩϡϝϯτͱ࣮૷ʹဃ཭͕ੜ·Εͳ͍ ● εΩʔϚϑΝʔετͳ։ൃ ● εΩʔϚΛݩʹͨ͠ίʔυͷࣗಈੜ੒ ܕ෇͚͞ΕͨεΩʔϚ

Slide 15

Slide 15 text

● ॊೈͳσʔλϑΣον ● ܕ෇͚͞ΕͨεΩʔϚ ● ڧྗͳΤίγεςϜ ● Fragment Colocation GraphQLͷϝϦοτ

Slide 16

Slide 16 text

● The GuildΛத৺ͱͨ͠ڧྗͳΤίγεςϜ ● e.g. GraphQL Code Generator, GraphQL Mesh, GraphQL ESLint ڧྗͳΤίγεςϜ

Slide 17

Slide 17 text

● ֤छGraphQLΫϥΠΞϯτ΋ΤίγεςϜͷॏཁͳཁૉ ● ΩϟογϡػߏͳͲʹΑΓΠϯϑϥ૚ΛҰ೚Ͱ͖Δ ڧྗͳΤίγεςϜ Apollo Client & Client-side Architecture Basics

Slide 18

Slide 18 text

● ॊೈͳσʔλϑΣον ● ܕ෇͚͞ΕͨεΩʔϚ ● ڧྗͳΤίγεςϜ ● Fragment Colocation GraphQLͷϝϦοτ

Slide 19

Slide 19 text

ίϯϙʔωϯτͷσʔλཁ݅Λ ίϯϙʔωϯτͷଆʹFragmentͰఆٛ͢Δઃܭࢥ૝ Fragment Colocationͱ͸

Slide 20

Slide 20 text

Fragment Colocationͱ͸ FragmentͱίϯϙʔωϯτΛಉҰϑΝΠϧʹఆٛ

Slide 21

Slide 21 text

Fragment Colocationͱ͸ ίϯϙʔωϯτͱGraphQLͷ֊૚ߏ଄͕Ұக

Slide 22

Slide 22 text

σʔλཁ݅͸֤ίϯϙʔωϯτͰఆٛͭͭ͠ σʔλऔಘ͸୯ҰͷQueryʢϦΫΤετʣͰߦ͑Δ Fragment ColocationʹΑΔϝϦοτ

Slide 23

Slide 23 text

● ΦʔόʔϑΣονʹؾ͖ͮ΍͍͢ ● मਖ਼࣌ͷӨڹൣғ͕ίϯϙʔωϯτʹด͍ͯ͡Δ ● ߴڽूɾૄ݁߹ͳͷͰνʔϜ΍λεΫΛ෼ׂ͠΍͍͢ Fragment ColocationʹΑΔϝϦοτ GraphQLͷϝϦοτΛ࠷େԽ͢Δʹ͸ɺFragment Colocation͕ඞཁ

Slide 24

Slide 24 text

1. ίϯϙʔωϯτπϦʔશମͰඞཁͳσʔλΛ1ͭͷQueryͰఆٛ a. Queryมߋ࣌ͷӨڹൣғ͕޿͍ b. ࢠίϯϙʔωϯτͷमਖ਼͕਌ίϯϙʔωϯτʹӨڹ 2. ֤ίϯϙʔωϯτͰσʔλऔಘΛ࣮ߦ a. ΢ΥʔλʔϑΥʔϧͷൃੜ Fragment ColocationΛߦΘͳ͍৔߹

Slide 25

Slide 25 text

● The Guild΋Fragment Colocationਪ͍ͯ͠Δ ○ Unleash the power of Fragments with GraphQL Codegen ● GraphQL Code Generatorͷclient preset ○ Fragment Masking͕σϑΥϧτͰ༗ޮ ○ Fragment ColocationΛڧ੍͞ΕΔ ΤίγεςϜͷํ޲ੑ

Slide 26

Slide 26 text

React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ

Slide 27

Slide 27 text

RSCΛ࢖͏͜ͱͰAPIϦΫΤετ͕αʔόʔͰ࣮ߦ͞Ε ΢ΥʔλʔϑΥʔϧ໰୊ͷӨڹ͕গͳ͘ͳΔ React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ ֤ίϯϙʔωϯτͰAPIϦΫΤετΛߦ͏͜ͱͰ ֤ίϯϙʔωϯτͰσʔλཁ݅ͷఆٛͱऔಘͷ྆ํ͕ՄೳʹͳΔ

Slide 28

Slide 28 text

RSCͱGraphQLͷڞ௨఺ ● ແବͳσʔλసૹͷ࡟ݮʹΑΔύϑΥʔϚϯεͷ޲্ ● ඇಉظσʔλసૹʹUXͷվળ ○ GraphQLͷ@deferσΟϨΫςΟϒ ○ RSCͷஈ֊తͳετϦʔϛϯά

Slide 29

Slide 29 text

ύϑΥʔϚϯεͱUXͷ؍఺ʹ͓͍ͯ GraphQL͕RSCͰஔ͖׵͑ΒΕΔϢʔεέʔε͸ଘࡏ͢Δ

Slide 30

Slide 30 text

GraphQL͕༗ޮͳ৔໘ ● SPAͷ৔߹ ○ APIϦΫΤετ͸ΫϥΠΞϯτ͔Β࣮ߦ ● RSCΑΓ΋GraphQLͷํ͕ίεύ͕ྑ͍৔߹ ○ RSCಋೖͷΠϯϑϥɾӡ༻ɾֶशίετ͸ߴ͍

Slide 31

Slide 31 text

02 ٕज़બఆͷ؍఺

Slide 32

Slide 32 text

● 📍 Fragment Colocation ● ⚡ ܕͷࣗಈੜ੒ ● 🔨 Ωϟογϡػߏ ● 📝 ֶशίετ ٕज़બఆͷ؍఺

Slide 33

Slide 33 text

ύϑΥʔϚϯεͱ։ൃऀମݧͷ؍఺Ͱඞཁ ؍఺ ● Fragment Colocationͷ࣮૷ͷ͠΍͢͞ ● Fragment Colocationʹ͓͚ΔύϑΥʔϚϯεͷ࠷దԽ 📍 Fragment Colocation

Slide 34

Slide 34 text

ܕ҆શੑͱҰ؏ੑͷ୲อʹඞཁ ؍఺ ● Query/Mutation/Fragmentͷܕͷࣗಈੜ੒͕Ͱ͖Δ͔ ⚡ ܕͷࣗಈੜ੒

Slide 35

Slide 35 text

ωοτϫʔΫϦΫΤετͷ࠷దԽͷͨΊʹඞཁ ؍఺ ● Ωϟογϡػߏͷ༗ແ ● Ωϟογϡػߏͷ࢓૊Έ ● Ωϟογϡͷѻ͍΍͢͞ 🔨 Ωϟογϡػߏ

Slide 36

Slide 36 text

։ൃੜ࢈ੑ޲্ͷͨΊʹඞཁ ؍఺ ● ϥΠϒϥϦͷѻ͍΍͢͞ ● υΩϡϝϯτ΍৘ใྔͷॆ࣮ੑ ● ίϛϡχςΟͷ׆ൃ͞ 📝 ֶशίετ

Slide 37

Slide 37 text

03 GraphQLΫϥΠΞϯτͷൺֱ

Slide 38

Slide 38 text

● Relay ● Apollo Client ● urql ● graphql-request GraphQLΫϥΠΞϯτͷൺֱ

Slide 39

Slide 39 text

GraphQLΫϥΠΞϯτͷൺֱ Relay Apollo Client urql graphql-request Fragment Colocation 🟢 🟡 🟡 🟡 ܕͷࣗಈੜ੒ 🟢 🟢 🟢 🟢 Ωϟογϡػߏ 🟢 🟡 🟡 🔴 ֶशίετ 🔴 🟡 🟢 🟢

Slide 40

Slide 40 text

● Relay ● Apollo Client ● urql ● graphql-request GraphQLΫϥΠΞϯτͷൺֱ

Slide 41

Slide 41 text

● ։ൃݩɿMeta ● GitHub Starɿ18kʢ2023/11/12࣌఺ʣ ● ࠾༻ࣄྫɿFacebookɺAtlassian Relay

Slide 42

Slide 42 text

● Relayͷࢥ૝ͱͯ͠Fragment ColocationΛॏཁࢹ ● ࣗવͱFragment Colocationʹ४ڌ࣮ͨ͠૷ʹͳΔ ○ Relay CompilerʹΑΔ࠷దͳQueryͷੜ੒ ○ Data MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ ○ Fragment scopedͳม਺ 📍 Fragment Colocation - Relay

Slide 43

Slide 43 text

📍 Fragment Colocation - Relay Data MaskingʹΑΓఆٛͯ͠ͳ͍σʔλʹ͸ΞΫηεͰ͖ͳ͍

Slide 44

Slide 44 text

● ίϯύΠϥʢRelay CompilerʣΛ಺แ ● Relay Compiler͕TypeScriptʢ΋͘͠͸FlowʣͷܕΛࣗಈੜ੒ ⚡ ܕͷࣗಈੜ੒ - Relay

Slide 45

Slide 45 text

● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ ● Global Object IdentificationʹΑΔσʔλͷਖ਼نԽ ○ άϩʔόϧʹҰҙͳIDΛ૝ఆ ○ ͜ΕʹΑΓϦϑΣον΍Ωϟογϡͷߋ৽͕࠷దԽ͞ΕΔ 🔨 Ωϟογϡػߏ - Relay

Slide 46

Slide 46 text

Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ ● ಉ͡Queryͷ৔߹ ● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡʹଘࡏ͢Δ৔߹ 🔨 Ωϟογϡػߏ - Relay

Slide 47

Slide 47 text

● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά ● ࠶ϨϯμϦϯά΋࠷దԽ͞ΕΔ ○ ֤ίϯϙʔωϯτͰఆٛͨ͠σʔλʹߋ৽͕͋ͬͨ৔߹ͷΈൃՐ ○ πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ͜ͱ͕ͳ͍ 🔨 Ωϟογϡػߏ - Relay

Slide 48

Slide 48 text

● ߴ͍ ● ಛʹ೔ຊޠͷ৘ใ͕গͳ͍ ● GraphQLʹରͯ͠ͷशख़౓͕ٻΊΒΕΔ ● ഁյతมߋ͕ଟ͍ͷͰ௥ै͕ඞཁ 📝 ֶशίετ - Relay

Slide 49

Slide 49 text

● Meta͕։ൃ͍ͯ͠ΔͷͰReactͱͷ૬ੑ͕͍͍ ○ React18ͷSuspenseͳͲ΋ਅͬઌʹରԠ͞Εͨ ● Relay CompilerʹΑΔGraphQLͷ໋໊نଇͷڧ੍ ● શମతʹGraphQLͷ࢓༷ʹ४ڌ ͦͷଞͷಛ௃ - Relay

Slide 50

Slide 50 text

● Relay ● Apollo Client ● urql ● graphql-request GraphQLΫϥΠΞϯτͷൺֱ

Slide 51

Slide 51 text

● ։ൃݩɿApollo Graph Inc. ● GitHub Starɿ19kʢ2023/11/12࣌఺ʣ ● ࠾༻ࣄྫɿMediumɺCircleCI Apollo Client

Slide 52

Slide 52 text

● Apollo Client୯ମͰ͸೉͍͠ ○ v3.8͔ΒuseFragment͕Stableʹͳ͕ͬͨɺॾʑͷػೳ͕଍Γͳ͍ҹ৅ ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ○ client presetͷFragment MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ ○ ≒ RelayͷDataMasking 📍 Fragment Colocation - Apollo Client

Slide 53

Slide 53 text

📍 Fragment Colocation - Apollo Client

Slide 54

Slide 54 text

📍 Fragment Colocation - Apollo Client

Slide 55

Slide 55 text

● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ● TypedDocumentNodeʹΑΔܕਪ࿦ ○ ܕ෇͚͞ΕͨDocumentNodeΦϒδΣΫτΛ࡞੒͢ΔͨΊͷ։ൃπʔϧ ○ Apollo ClientҎ֎ͷϥΠϒϥϦͰ΋࢖༻Մೳ ⚡ ܕͷࣗಈੜ੒ - Apollo Client

Slide 56

Slide 56 text

● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ ● Ұҙͳࣝผࢠͷੜ੒ʹΑΔσʔλͷਖ਼نԽ ○ idͱ__typenameΛ݁߹ͨ͠Ωϟογϡ༻ͷࣝผࢠΛੜ੒ 🔨 Ωϟογϡػߏ - Apollo Client

Slide 57

Slide 57 text

Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ ● ಉ͡Queryͷ৔߹ ● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡ͕ଘࡏ͢Δ৔߹ 🔨 Ωϟογϡػߏ - Apollo Client

Slide 58

Slide 58 text

● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά ● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ ○ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ 🔨 Ωϟογϡػߏ - Apollo Client

Slide 59

Slide 59 text

● ී௨ ● ίϛϡχςΟ͕׆ൃ ● ೔ຊޠͷ৘ใ͕ॆ࣮͍ͯ͠Δ ● ৘ใ͕๛෋ͳ൓໘ɺػೳ΋ଟ͍ 📝 ֶशίετ - Apollo Client

Slide 60

Slide 60 text

● Apollo LinkͳͲͷपลϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ ● Relay΍urqlͱൺ΂ͯ։ൃ͕஗Ε͍ͯΔ ○ e.g. React18ͷSuspense΁ͷରԠ͕ະ׬ྃʢ2023/11/12࣌఺ʣ ͦͷଞͷಛ௃ - Apollo Client

Slide 61

Slide 61 text

● Relay ● Apollo Client ● urql ● graphql-request GraphQLΫϥΠΞϯτͷൺֱ

Slide 62

Slide 62 text

● ։ൃݩɿFormidable ● GitHub Starɿ8.2kʢ2023/11/12࣌఺ʣ ● ࠾༻ࣄྫɿGitHubɺTripadvisor urql

Slide 63

Slide 63 text

● Apollo Clientͱಉ༷ ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ 📍 Fragment Colocation - urql

Slide 64

Slide 64 text

● Apollo Clientͱಉ༷ ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ⚡ ܕͷࣗಈੜ੒ - urql

Slide 65

Slide 65 text

● Document Cacheͱݺ͹ΕΔΩϟογϡػߏΛ࣋ͭ ● QueryͱVariablesͷ૊Έ߹Θͤ͝ͱʹΩϟογϡΛอ࣋ 🔨 Ωϟογϡػߏ - urql

Slide 66

Slide 66 text

Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ ● ಉ͡Queryͷ৔߹ 🔨 Ωϟογϡػߏ - urql

Slide 67

Slide 67 text

● Apollo Clientͱಉ༷ ● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά ● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ ○ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ 🔨 Ωϟογϡػߏ - urql

Slide 68

Slide 68 text

● ਖ਼نԽ͞ΕͨΩϟογϡΛར༻͢Δ͜ͱ΋Մೳ ● ਖ਼نԽͷϩδοΫ͸Apollo Clientͱಉ༷ 🔨 Ωϟογϡػߏ - urql

Slide 69

Slide 69 text

● ௿͍ ● ػೳ͕γϯϓϧͳͨΊɺΩϟονΞοϓ͕༰қ 📝 ֶशίετ - urql

Slide 70

Slide 70 text

● όϯυϧαΠζ͕খ͍͞ ● ExchangeʹΑΔ֦ு͕Մೳ ○ ≒ GraphQLͷϦΫΤετ/ϨεϙϯεΛॲཧ͢ΔͨΊͷϛυϧ΢ΣΞ ͦͷଞͷಛ௃ - urql

Slide 71

Slide 71 text

● Relay ● Apollo Client ● urql ● graphql-request GraphQLΫϥΠΞϯτͷൺֱ

Slide 72

Slide 72 text

● ։ൃݩɿJason Kuhrtࢯ ● GitHub Starɿ5.5kʢ2023/11/12࣌఺ʣ ● ࠾༻ࣄྫɿஶ໊ͳاۀͰ͸ͳ͠ graphql-request

Slide 73

Slide 73 text

● Apollo Clientͱಉ༷ ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ 📍 Fragment Colocation - graphql-request

Slide 74

Slide 74 text

● Apollo Clientͱಉ༷ ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ⚡ ܕͷࣗಈੜ੒ - graphql-request

Slide 75

Slide 75 text

● ࣋ͨͳ͍ 🔨 Ωϟογϡػߏ - graphql-request

Slide 76

Slide 76 text

● ۃΊͯ௿͍ ● ࠷௿ݶͷػೳ͔͠උ͍͑ͯͳ͍ 📝 ֶशίετ - graphql-request

Slide 77

Slide 77 text

● ඇৗʹγϯϓϧͰܰྔ ͦͷଞͷಛ௃ - graphql-request

Slide 78

Slide 78 text

Slide 79

Slide 79 text

● Ωϟογϡػߏ͕ෆཁͳΒgraphql-request ● Ωϟογϡػߏ͕ඞཁͳΒRelay or Apollo Client or urql ͲΕΛ࠾༻͢Ε͹͍͍͔ʁ

Slide 80

Slide 80 text

● ୈҰީิͱͯ͠Relay ● ࣍఺ͰApollo Client or urql Ωϟογϡػߏ͕ඞཁͳ৔߹

Slide 81

Slide 81 text

ͳ͔ͥʁ

Slide 82

Slide 82 text

GraphQLಋೖͷҰ൪ͷ໨త͸   ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹΑΔύϑΥʔϚϯεͱUXͷ޲্

Slide 83

Slide 83 text

● Fragment Colocationͷ࠾༻͕ඞਢ ● ͦͷࢥ૝ʹैͬͯ࠷దԽ͞Ε͍ͯΔͷ͸ݱঢ়Ͱ͸RelayͷΈ ● ֶशίετ͸ߴ͍͕ɺͦΕʹݟ߹͏Ϧλʔϯ͸େ͍ʹ͋Δ ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹ͓͍ͯ

Slide 84

Slide 84 text

● Apollo ClientͰ࢖͍͍ͨػೳ͕ͳ͍ͳΒurql ○ ࣮ݱ͍ͨ͜͠ͱʹରͯ͠Apollo Client͸Φʔόʔͳέʔε͕ଟ͍ ○ େମͷϢʔεέʔε͸urqlΧόʔͰ͖Δ ● Apollo Clientͷෳࡶ͞ނͷ໰୊΋͋Δ ○ όʔδϣϯΞοϓʹ൐͏ΩϟογϡपΓσάϨ ○ React΁ͷ௥ैͷ஗Ε Apollo Client ͱ urql

Slide 85

Slide 85 text

04 ۩ମతͳબఆࣄྫ

Slide 86

Slide 86 text

۩ମతͳબఆࣄྫ ग़඼؅ཧSaaSνʔϜͰ͸Apollo ClientΛ࠾༻

Slide 87

Slide 87 text

● ϓϩμΫτͷཁ݅తʹ΋Ωϟογϡػߏ͸ඞཁ ● GraphQLࣗମ͕ॳΊͯͩͬͨͷ΋͋Γಋೖͷ͠΍͢͞Λ༏ઌ ● ౰࣌͸࠾༻ࣄྫ΋গͳ͔ͬͨͷ΋͋Γurqlͷ࠾༻͸ݟૹΓ બఆཧ༝

Slide 88

Slide 88 text

● ಋೖ΋εϜʔζͰ։ൃॳظ͸໰୊ͳ͔ͬͨ ● ։ൃ͕ਐΉʹͭΕͯ໰୊͕ൃੜ ○ ΩϟογϡपΓͷෆ۩߹ ○ Fragment Colocationͷڧ੍͕Ͱ͖ͳ͍ ○ Suspense΁ͷରԠͷ஗Ε ։ൃͯ͠Έͯ

Slide 89

Slide 89 text

● ్தͰRelay΁ͷ৐Γ׵͑΋ݕ౼͕ͨ͠அ೦ ● αʔόʔ͕Global Object Identificationʹ४ڌͰ͖ͳ͔ͬͨ Relay΁ͷ৐Γ׵͑

Slide 90

Slide 90 text

● client preset΁Ҡߦͯ͠ɺFragment Colocationͷڧ੍ ● ESLintͰ໋໊نଇͷϧʔϧ௥Ճ Apollo ClientΛ࢖͍ଓ͚Δํ޲Ͱ؀ڥ੔උʹ஫ྗ

Slide 91

Slide 91 text

● HygenʹΑΔίϯϙʔωϯτͷ਽ܗͷੜ੒ Apollo ClientΛ࢖͍ଓ͚Δํ޲Ͱ؀ڥ੔උʹ஫ྗ

Slide 92

Slide 92 text

● v3.8ͰuseFragment͕Stableʹͳͬͨ ○ Fragmentͷߋ৽ͷΈΛݕ஌ͯ͠࠶ϨϯμϦϯά ○ Suspense͸ະରԠͰɺଞʹ΋੍໿͕͋ΔͷͰར༻͸·ͩ೉͍͠ ● ͜ͷล͕ॆ࣮ͯ͘͠Ε͹࠾༻ͷ༏ઌ౓্͕͕Δ͔΋ʁ Apollo Clientͷࠓޙ

Slide 93

Slide 93 text

● GraphQLΛ࠷େݶ׆༻͢Δʹ͸Fragment Colocation͕ॏཁ ● ͦͷ؍఺Ͱ͸GraphQLΫϥΠΞϯτ͸Relay͕͓͢͢Ί ● ଞͷΫϥΠΞϯτͰ΋͍ۙମݧ͸ಘΒΕΔΑ͏ʹͳͬͯདྷͯΔ ·ͱΊ

Slide 94

Slide 94 text

THANK YOU