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

Transcript

1. GraphQLΫϥΠΞϯτͷٕज़બఆ 2023ౙ ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2023 2023.11.18
2. ૣ੉࿨ًʢ@KazukiHayaseʣ • 2021೥BuySell Technologies৽ଔೖࣾ • ग़඼؅ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ • Go / TypeScript / GraphQL / ։ൃੜ࢈ੑվળ
5. • GraphQLΫϥΠΞϯτͷٕज़બఆͷ؍఺ • GraphQLΫϥΠΞϯτͷ঺հͱൺֱ ࿩͢͜ͱ • GraphQLʹ͍ͭͯͷৄ͍͠આ໌ ࿩͞ͳ͍͜ͱ
6. ΞδΣϯμ GraphQLʹ͍ͭͯ 01 ٕज़બఆͷ؍఺ 02 GraphQLΫϥΠΞϯτͷൺֱ 03 ۩ମతͳબఆࣄྫ 04
7. 01 GraphQLʹ͍ͭͯ
8. • Meta͕։ൃͨ͠Web APIͷن֨ • APIͷ࢓༷ΛεΩʔϚͰఆٛ • ΫϥΠΞϯτ͕ඞཁͳσʔλߏ଄Λࢦఆͯ͠औಘՄೳ GraphQLͱ͸
9. • ॊೈͳσʔλϑΣον • ܕ෇͚͞ΕͨεΩʔϚ • ڧྗͳΤίγεςϜ • Fragment Colocation GraphQLͷϝϦοτ
10. • ॊೈͳσʔλϑΣον • ܕ෇͚͞ΕͨεΩʔϚ • ڧྗͳΤίγεςϜ • Fragment Colocation GraphQLͷϝϦοτ
11. ॊೈͳσʔλϑΣον
12. ॊೈͳσʔλϑΣον ඞཁͳσʔλͷΈΛ୯ҰͷϦΫΤετͰऔಘՄೳ ΦʔόʔϑΣον/ΞϯμʔϑΣονͷ๷ࢭ ϞόΠϧͳͲͷ௿଎ωοτϫʔΫͰ΋ߴ଎ʹಈ࡞
13. • ॊೈͳσʔλϑΣον • ܕ෇͚͞ΕͨεΩʔϚ • ڧྗͳΤίγεςϜ • Fragment Colocation GraphQLͷϝϦοτ
14. • υΩϡϝϯτͱ࣮૷ʹဃ཭͕ੜ·Εͳ͍ • εΩʔϚϑΝʔετͳ։ൃ • εΩʔϚΛݩʹͨ͠ίʔυͷࣗಈੜ੒ ܕ෇͚͞ΕͨεΩʔϚ
15. • ॊೈͳσʔλϑΣον • ܕ෇͚͞ΕͨεΩʔϚ • ڧྗͳΤίγεςϜ • Fragment Colocation GraphQLͷϝϦοτ
16. • The GuildΛத৺ͱͨ͠ڧྗͳΤίγεςϜ • e.g. GraphQL Code Generator, GraphQL Mesh, GraphQL ESLint ڧྗͳΤίγεςϜ
17. • ֤छGraphQLΫϥΠΞϯτ΋ΤίγεςϜͷॏཁͳཁૉ • ΩϟογϡػߏͳͲʹΑΓΠϯϑϥ૚ΛҰ೚Ͱ͖Δ ڧྗͳΤίγεςϜ Apollo Client & Client-side Architecture Basics
18. • ॊೈͳσʔλϑΣον • ܕ෇͚͞ΕͨεΩʔϚ • ڧྗͳΤίγεςϜ • Fragment Colocation GraphQLͷϝϦοτ
19. ίϯϙʔωϯτͷσʔλཁ݅Λ ίϯϙʔωϯτͷଆʹFragmentͰఆٛ͢Δઃܭࢥ૝ Fragment Colocationͱ͸
20. Fragment Colocationͱ͸ FragmentͱίϯϙʔωϯτΛಉҰϑΝΠϧʹఆٛ
21. Fragment Colocationͱ͸ ίϯϙʔωϯτͱGraphQLͷ֊૚ߏ଄͕Ұக
22. σʔλཁ݅͸֤ίϯϙʔωϯτͰఆٛͭͭ͠ σʔλऔಘ͸୯ҰͷQueryʢϦΫΤετʣͰߦ͑Δ Fragment ColocationʹΑΔϝϦοτ
23. • ΦʔόʔϑΣονʹؾ͖ͮ΍͍͢ • मਖ਼࣌ͷӨڹൣғ͕ίϯϙʔωϯτʹด͍ͯ͡Δ • ߴڽूɾૄ݁߹ͳͷͰνʔϜ΍λεΫΛ෼ׂ͠΍͍͢ Fragment ColocationʹΑΔϝϦοτ GraphQLͷϝϦοτΛ࠷େԽ͢Δʹ͸ɺFragment Colocation͕ඞཁ
24. 1. ίϯϙʔωϯτπϦʔશମͰඞཁͳσʔλΛ1ͭͷQueryͰఆٛ a. Queryมߋ࣌ͷӨڹൣғ͕޿͍ b. ࢠίϯϙʔωϯτͷमਖ਼͕਌ίϯϙʔωϯτʹӨڹ 2. ֤ίϯϙʔωϯτͰσʔλऔಘΛ࣮ߦ a. ΢ΥʔλʔϑΥʔϧͷൃੜ Fragment ColocationΛߦΘͳ͍৔߹
25. • The Guild΋Fragment Colocationਪ͍ͯ͠Δ ◦ Unleash the power of Fragments with GraphQL Codegen • GraphQL Code Generatorͷclient preset ◦ Fragment Masking͕σϑΥϧτͰ༗ޮ ◦ Fragment ColocationΛڧ੍͞ΕΔ ΤίγεςϜͷํ޲ੑ
26. React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ
27. RSCΛ࢖͏͜ͱͰAPIϦΫΤετ͕αʔόʔͰ࣮ߦ͞Ε ΢ΥʔλʔϑΥʔϧ໰୊ͷӨڹ͕গͳ͘ͳΔ React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ ֤ίϯϙʔωϯτͰAPIϦΫΤετΛߦ͏͜ͱͰ ֤ίϯϙʔωϯτͰσʔλཁ݅ͷఆٛͱऔಘͷ྆ํ͕ՄೳʹͳΔ
28. RSCͱGraphQLͷڞ௨఺ • ແବͳσʔλసૹͷ࡟ݮʹΑΔύϑΥʔϚϯεͷ޲্ • ඇಉظσʔλసૹʹUXͷվળ ◦ GraphQLͷ@deferσΟϨΫςΟϒ ◦ RSCͷஈ֊తͳετϦʔϛϯά
29. ύϑΥʔϚϯεͱUXͷ؍఺ʹ͓͍ͯ GraphQL͕RSCͰஔ͖׵͑ΒΕΔϢʔεέʔε͸ଘࡏ͢Δ
30. GraphQL͕༗ޮͳ৔໘ • SPAͷ৔߹ ◦ APIϦΫΤετ͸ΫϥΠΞϯτ͔Β࣮ߦ • RSCΑΓ΋GraphQLͷํ͕ίεύ͕ྑ͍৔߹ ◦ RSCಋೖͷΠϯϑϥɾӡ༻ɾֶशίετ͸ߴ͍
31. 02 ٕज़બఆͷ؍఺
32. • 📍 Fragment Colocation • ⚡ ܕͷࣗಈੜ੒ • 🔨 Ωϟογϡػߏ • 📝 ֶशίετ ٕज़બఆͷ؍఺
33. ύϑΥʔϚϯεͱ։ൃऀମݧͷ؍఺Ͱඞཁ ؍఺ • Fragment Colocationͷ࣮૷ͷ͠΍͢͞ • Fragment Colocationʹ͓͚ΔύϑΥʔϚϯεͷ࠷దԽ 📍 Fragment Colocation
34. ܕ҆શੑͱҰ؏ੑͷ୲อʹඞཁ ؍఺ • Query/Mutation/Fragmentͷܕͷࣗಈੜ੒͕Ͱ͖Δ͔ ⚡ ܕͷࣗಈੜ੒
35. ωοτϫʔΫϦΫΤετͷ࠷దԽͷͨΊʹඞཁ ؍఺ • Ωϟογϡػߏͷ༗ແ • Ωϟογϡػߏͷ࢓૊Έ • Ωϟογϡͷѻ͍΍͢͞ 🔨 Ωϟογϡػߏ
36. ։ൃੜ࢈ੑ޲্ͷͨΊʹඞཁ ؍఺ • ϥΠϒϥϦͷѻ͍΍͢͞ • υΩϡϝϯτ΍৘ใྔͷॆ࣮ੑ • ίϛϡχςΟͷ׆ൃ͞ 📝 ֶशίετ
37. 03 GraphQLΫϥΠΞϯτͷൺֱ
38. • Relay • Apollo Client • urql • graphql-request GraphQLΫϥΠΞϯτͷൺֱ
39. GraphQLΫϥΠΞϯτͷൺֱ Relay Apollo Client urql graphql-request Fragment Colocation 🟢 🟡 🟡 🟡 ܕͷࣗಈੜ੒ 🟢 🟢 🟢 🟢 Ωϟογϡػߏ 🟢 🟡 🟡 🔴 ֶशίετ 🔴 🟡 🟢 🟢
40. • Relay • Apollo Client • urql • graphql-request GraphQLΫϥΠΞϯτͷൺֱ
41. • ։ൃݩɿMeta • GitHub Starɿ18kʢ2023/11/12࣌఺ʣ • ࠾༻ࣄྫɿFacebookɺAtlassian Relay
42. • Relayͷࢥ૝ͱͯ͠Fragment ColocationΛॏཁࢹ • ࣗવͱFragment Colocationʹ४ڌ࣮ͨ͠૷ʹͳΔ ◦ Relay CompilerʹΑΔ࠷దͳQueryͷੜ੒ ◦ Data MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ ◦ Fragment scopedͳม਺ 📍 Fragment Colocation - Relay
43. 📍 Fragment Colocation - Relay Data MaskingʹΑΓఆٛͯ͠ͳ͍σʔλʹ͸ΞΫηεͰ͖ͳ͍
44. • ίϯύΠϥʢRelay CompilerʣΛ಺แ • Relay Compiler͕TypeScriptʢ΋͘͠͸FlowʣͷܕΛࣗಈੜ੒ ⚡ ܕͷࣗಈੜ੒ - Relay
45. • σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ • Global Object IdentificationʹΑΔσʔλͷਖ਼نԽ ◦ άϩʔόϧʹҰҙͳIDΛ૝ఆ ◦ ͜ΕʹΑΓϦϑΣον΍Ωϟογϡͷߋ৽͕࠷దԽ͞ΕΔ 🔨 Ωϟογϡػߏ - Relay
46. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ • ಉ͡Queryͷ৔߹ • ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡʹଘࡏ͢Δ৔߹ 🔨 Ωϟογϡػߏ - Relay
47. • Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά • ࠶ϨϯμϦϯά΋࠷దԽ͞ΕΔ ◦ ֤ίϯϙʔωϯτͰఆٛͨ͠σʔλʹߋ৽͕͋ͬͨ৔߹ͷΈൃՐ ◦ πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ͜ͱ͕ͳ͍ 🔨 Ωϟογϡػߏ - Relay
48. • ߴ͍ • ಛʹ೔ຊޠͷ৘ใ͕গͳ͍ • GraphQLʹରͯ͠ͷशख़౓͕ٻΊΒΕΔ • ഁյతมߋ͕ଟ͍ͷͰ௥ै͕ඞཁ 📝 ֶशίετ - Relay
49. • Meta͕։ൃ͍ͯ͠ΔͷͰReactͱͷ૬ੑ͕͍͍ ◦ React18ͷSuspenseͳͲ΋ਅͬઌʹରԠ͞Εͨ • Relay CompilerʹΑΔGraphQLͷ໋໊نଇͷڧ੍ • શମతʹGraphQLͷ࢓༷ʹ४ڌ ͦͷଞͷಛ௃ - Relay
50. • Relay • Apollo Client • urql • graphql-request GraphQLΫϥΠΞϯτͷൺֱ
51. • ։ൃݩɿApollo Graph Inc. • GitHub Starɿ19kʢ2023/11/12࣌఺ʣ • ࠾༻ࣄྫɿMediumɺCircleCI Apollo Client
52. • Apollo Client୯ମͰ͸೉͍͠ ◦ v3.8͔ΒuseFragment͕Stableʹͳ͕ͬͨɺॾʑͷػೳ͕଍Γͳ͍ҹ৅ • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ◦ client presetͷFragment MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ ◦ ≒ RelayͷDataMasking 📍 Fragment Colocation - Apollo Client
53. 📍 Fragment Colocation - Apollo Client
54. 📍 Fragment Colocation - Apollo Client
55. • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ • TypedDocumentNodeʹΑΔܕਪ࿦ ◦ ܕ෇͚͞ΕͨDocumentNodeΦϒδΣΫτΛ࡞੒͢ΔͨΊͷ։ൃπʔϧ ◦ Apollo ClientҎ֎ͷϥΠϒϥϦͰ΋࢖༻Մೳ ⚡ ܕͷࣗಈੜ੒ - Apollo Client
56. • σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ • Ұҙͳࣝผࢠͷੜ੒ʹΑΔσʔλͷਖ਼نԽ ◦ idͱ__typenameΛ݁߹ͨ͠Ωϟογϡ༻ͷࣝผࢠΛੜ੒ 🔨 Ωϟογϡػߏ - Apollo Client
57. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ • ಉ͡Queryͷ৔߹ • ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡ͕ଘࡏ͢Δ৔߹ 🔨 Ωϟογϡػߏ - Apollo Client
58. • Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά • QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ ◦ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ 🔨 Ωϟογϡػߏ - Apollo Client
59. • ී௨ • ίϛϡχςΟ͕׆ൃ • ೔ຊޠͷ৘ใ͕ॆ࣮͍ͯ͠Δ • ৘ใ͕๛෋ͳ൓໘ɺػೳ΋ଟ͍ 📝 ֶशίετ - Apollo Client
60. • Apollo LinkͳͲͷपลϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ • Relay΍urqlͱൺ΂ͯ։ൃ͕஗Ε͍ͯΔ ◦ e.g. React18ͷSuspense΁ͷରԠ͕ະ׬ྃʢ2023/11/12࣌఺ʣ ͦͷଞͷಛ௃ - Apollo Client
61. • Relay • Apollo Client • urql • graphql-request GraphQLΫϥΠΞϯτͷൺֱ
62. • ։ൃݩɿFormidable • GitHub Starɿ8.2kʢ2023/11/12࣌఺ʣ • ࠾༻ࣄྫɿGitHubɺTripadvisor urql
63. • Apollo Clientͱಉ༷ • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ 📍 Fragment Colocation - urql
64. • Apollo Clientͱಉ༷ • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ⚡ ܕͷࣗಈੜ੒ - urql
65. • Document Cacheͱݺ͹ΕΔΩϟογϡػߏΛ࣋ͭ • QueryͱVariablesͷ૊Έ߹Θͤ͝ͱʹΩϟογϡΛอ࣋ 🔨 Ωϟογϡػߏ - urql
66. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ • ಉ͡Queryͷ৔߹ 🔨 Ωϟογϡػߏ - urql
67. • Apollo Clientͱಉ༷ • Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά • QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ ◦ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ 🔨 Ωϟογϡػߏ - urql
68. • ਖ਼نԽ͞ΕͨΩϟογϡΛར༻͢Δ͜ͱ΋Մೳ • ਖ਼نԽͷϩδοΫ͸Apollo Clientͱಉ༷ 🔨 Ωϟογϡػߏ - urql
69. • ௿͍ • ػೳ͕γϯϓϧͳͨΊɺΩϟονΞοϓ͕༰қ 📝 ֶशίετ - urql
70. • όϯυϧαΠζ͕খ͍͞ • ExchangeʹΑΔ֦ு͕Մೳ ◦ ≒ GraphQLͷϦΫΤετ/ϨεϙϯεΛॲཧ͢ΔͨΊͷϛυϧ΢ΣΞ ͦͷଞͷಛ௃ - urql
71. • Relay • Apollo Client • urql • graphql-request GraphQLΫϥΠΞϯτͷൺֱ
72. • ։ൃݩɿJason Kuhrtࢯ • GitHub Starɿ5.5kʢ2023/11/12࣌఺ʣ • ࠾༻ࣄྫɿஶ໊ͳاۀͰ͸ͳ͠ graphql-request
73. • Apollo Clientͱಉ༷ • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ 📍 Fragment Colocation - graphql-request
74. • Apollo Clientͱಉ༷ • GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ ⚡ ܕͷࣗಈੜ੒ - graphql-request
75. • ࣋ͨͳ͍ 🔨 Ωϟογϡػߏ - graphql-request
76. • ۃΊͯ௿͍ • ࠷௿ݶͷػೳ͔͠උ͍͑ͯͳ͍ 📝 ֶशίετ - graphql-request
77. • ඇৗʹγϯϓϧͰܰྔ ͦͷଞͷಛ௃ - graphql-request
78. GraphQLΫϥΠΞϯτͷൺֱ Relay Apollo Client urql graphql-request Fragment Colocation 🟢 🟡 🟡 🟡 ܕͷࣗಈੜ੒ 🟢 🟢 🟢 🟢 Ωϟογϡػߏ 🟢 🟡 🟡 🔴 ֶशίετ 🔴 🟡 🟢 🟢
79. • Ωϟογϡػߏ͕ෆཁͳΒgraphql-request • Ωϟογϡػߏ͕ඞཁͳΒRelay or Apollo Client or urql ͲΕΛ࠾༻͢Ε͹͍͍͔ʁ
80. • ୈҰީิͱͯ͠Relay • ࣍఺ͰApollo Client or urql Ωϟογϡػߏ͕ඞཁͳ৔߹
81. ͳ͔ͥʁ
82. GraphQLಋೖͷҰ൪ͷ໨త͸ 
 ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹΑΔύϑΥʔϚϯεͱUXͷ޲্
83. • Fragment Colocationͷ࠾༻͕ඞਢ • ͦͷࢥ૝ʹैͬͯ࠷దԽ͞Ε͍ͯΔͷ͸ݱঢ়Ͱ͸RelayͷΈ • ֶशίετ͸ߴ͍͕ɺͦΕʹݟ߹͏Ϧλʔϯ͸େ͍ʹ͋Δ ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹ͓͍ͯ
84. • Apollo ClientͰ࢖͍͍ͨػೳ͕ͳ͍ͳΒurql ◦ ࣮ݱ͍ͨ͜͠ͱʹରͯ͠Apollo Client͸Φʔόʔͳέʔε͕ଟ͍ ◦ େମͷϢʔεέʔε͸urqlΧόʔͰ͖Δ • Apollo Clientͷෳࡶ͞ނͷ໰୊΋͋Δ ◦ όʔδϣϯΞοϓʹ൐͏ΩϟογϡपΓσάϨ ◦ React΁ͷ௥ैͷ஗Ε Apollo Client ͱ urql
85. 04 ۩ମతͳબఆࣄྫ
86. ۩ମతͳબఆࣄྫ ग़඼؅ཧSaaSνʔϜͰ͸Apollo ClientΛ࠾༻
87. • ϓϩμΫτͷཁ݅తʹ΋Ωϟογϡػߏ͸ඞཁ • GraphQLࣗମ͕ॳΊͯͩͬͨͷ΋͋Γಋೖͷ͠΍͢͞Λ༏ઌ • ౰࣌͸࠾༻ࣄྫ΋গͳ͔ͬͨͷ΋͋Γurqlͷ࠾༻͸ݟૹΓ બఆཧ༝
88. • ಋೖ΋εϜʔζͰ։ൃॳظ͸໰୊ͳ͔ͬͨ • ։ൃ͕ਐΉʹͭΕͯ໰୊͕ൃੜ ◦ ΩϟογϡपΓͷෆ۩߹ ◦ Fragment Colocationͷڧ੍͕Ͱ͖ͳ͍ ◦ Suspense΁ͷରԠͷ஗Ε ։ൃͯ͠Έͯ
89. • ్தͰRelay΁ͷ৐Γ׵͑΋ݕ౼͕ͨ͠அ೦ • αʔόʔ͕Global Object Identificationʹ४ڌͰ͖ͳ͔ͬͨ Relay΁ͷ৐Γ׵͑
90. • client preset΁Ҡߦͯ͠ɺFragment Colocationͷڧ੍ • ESLintͰ໋໊نଇͷϧʔϧ௥Ճ Apollo ClientΛ࢖͍ଓ͚Δํ޲Ͱ؀ڥ੔උʹ஫ྗ
91. • HygenʹΑΔίϯϙʔωϯτͷ਽ܗͷੜ੒ Apollo ClientΛ࢖͍ଓ͚Δํ޲Ͱ؀ڥ੔උʹ஫ྗ
92. • v3.8ͰuseFragment͕Stableʹͳͬͨ ◦ Fragmentͷߋ৽ͷΈΛݕ஌ͯ͠࠶ϨϯμϦϯά ◦ Suspense͸ະରԠͰɺଞʹ΋੍໿͕͋ΔͷͰར༻͸·ͩ೉͍͠ • ͜ͷล͕ॆ࣮ͯ͘͠Ε͹࠾༻ͷ༏ઌ౓্͕͕Δ͔΋ʁ Apollo Clientͷࠓޙ
93. • GraphQLΛ࠷େݶ׆༻͢Δʹ͸Fragment Colocation͕ॏཁ • ͦͷ؍఺Ͱ͸GraphQLΫϥΠΞϯτ͸Relay͕͓͢͢Ί • ଞͷΫϥΠΞϯτͰ΋͍ۙମݧ͸ಘΒΕΔΑ͏ʹͳͬͯདྷͯΔ ·ͱΊ
94. THANK YOU