$30 off During Our Annual Pro Sale. View Details »

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

KazukiHayase
November 17, 2023

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

KazukiHayase

November 17, 2023
Tweet

More Decks by KazukiHayase

Other Decks in Technology

Transcript

  1. GraphQLΫϥΠΞϯτͷٕज़બఆ 2023ౙ
    ϑϩϯτΤϯυΧϯϑΝϨϯεԭೄ2023


    2023.11.18

    View Slide

  2. ૣ੉࿨ًʢ@KazukiHayaseʣ
    ● 2021೥BuySell Technologies৽ଔೖࣾ


    ● ग़඼؅ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ


    ● Go / TypeScript / GraphQL / ։ൃੜ࢈ੑվળ

    View Slide

  3. View Slide

  4. View Slide

  5. ● GraphQLΫϥΠΞϯτͷٕज़બఆͷ؍఺


    ● GraphQLΫϥΠΞϯτͷ঺հͱൺֱ
    ࿩͢͜ͱ
    ● GraphQLʹ͍ͭͯͷৄ͍͠આ໌
    ࿩͞ͳ͍͜ͱ

    View Slide

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

    View Slide

  7. 01
    GraphQLʹ͍ͭͯ

    View Slide

  8. ● Meta͕։ൃͨ͠Web APIͷن֨


    ● APIͷ࢓༷ΛεΩʔϚͰఆٛ


    ● ΫϥΠΞϯτ͕ඞཁͳσʔλߏ଄Λࢦఆͯ͠औಘՄೳ
    GraphQLͱ͸

    View Slide

  9. ● ॊೈͳσʔλϑΣον


    ● ܕ෇͚͞ΕͨεΩʔϚ


    ● ڧྗͳΤίγεςϜ


    ● Fragment Colocation
    GraphQLͷϝϦοτ

    View Slide

  10. ● ॊೈͳσʔλϑΣον


    ● ܕ෇͚͞ΕͨεΩʔϚ


    ● ڧྗͳΤίγεςϜ


    ● Fragment Colocation
    GraphQLͷϝϦοτ

    View Slide

  11. ॊೈͳσʔλϑΣον

    View Slide

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

    View Slide

  13. ● ॊೈͳσʔλϑΣον


    ● ܕ෇͚͞ΕͨεΩʔϚ


    ● ڧྗͳΤίγεςϜ


    ● Fragment Colocation
    GraphQLͷϝϦοτ

    View Slide

  14. ● υΩϡϝϯτͱ࣮૷ʹဃ཭͕ੜ·Εͳ͍


    ● εΩʔϚϑΝʔετͳ։ൃ


    ● εΩʔϚΛݩʹͨ͠ίʔυͷࣗಈੜ੒
    ܕ෇͚͞ΕͨεΩʔϚ

    View Slide

  15. ● ॊೈͳσʔλϑΣον


    ● ܕ෇͚͞ΕͨεΩʔϚ


    ● ڧྗͳΤίγεςϜ


    ● Fragment Colocation
    GraphQLͷϝϦοτ

    View Slide

  16. ● The GuildΛத৺ͱͨ͠ڧྗͳΤίγεςϜ


    ● e.g. GraphQL Code Generator, GraphQL Mesh, GraphQL ESLint
    ڧྗͳΤίγεςϜ

    View Slide

  17. ● ֤छGraphQLΫϥΠΞϯτ΋ΤίγεςϜͷॏཁͳཁૉ


    ● ΩϟογϡػߏͳͲʹΑΓΠϯϑϥ૚ΛҰ೚Ͱ͖Δ
    ڧྗͳΤίγεςϜ
    Apollo Client & Client-side Architecture Basics

    View Slide

  18. ● ॊೈͳσʔλϑΣον


    ● ܕ෇͚͞ΕͨεΩʔϚ


    ● ڧྗͳΤίγεςϜ


    ● Fragment Colocation
    GraphQLͷϝϦοτ

    View Slide

  19. ίϯϙʔωϯτͷσʔλཁ݅Λ


    ίϯϙʔωϯτͷଆʹFragmentͰఆٛ͢Δઃܭࢥ૝
    Fragment Colocationͱ͸

    View Slide

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

    View Slide

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

    View Slide

  22. σʔλཁ݅͸֤ίϯϙʔωϯτͰఆٛͭͭ͠


    σʔλऔಘ͸୯ҰͷQueryʢϦΫΤετʣͰߦ͑Δ
    Fragment ColocationʹΑΔϝϦοτ

    View Slide

  23. ● ΦʔόʔϑΣονʹؾ͖ͮ΍͍͢


    ● मਖ਼࣌ͷӨڹൣғ͕ίϯϙʔωϯτʹด͍ͯ͡Δ


    ● ߴڽूɾૄ݁߹ͳͷͰνʔϜ΍λεΫΛ෼ׂ͠΍͍͢
    Fragment ColocationʹΑΔϝϦοτ
    GraphQLͷϝϦοτΛ࠷େԽ͢Δʹ͸ɺFragment Colocation͕ඞཁ

    View Slide

  24. 1. ίϯϙʔωϯτπϦʔશମͰඞཁͳσʔλΛ1ͭͷQueryͰఆٛ


    a. Queryมߋ࣌ͷӨڹൣғ͕޿͍


    b. ࢠίϯϙʔωϯτͷमਖ਼͕਌ίϯϙʔωϯτʹӨڹ


    2. ֤ίϯϙʔωϯτͰσʔλऔಘΛ࣮ߦ


    a. ΢ΥʔλʔϑΥʔϧͷൃੜ
    Fragment ColocationΛߦΘͳ͍৔߹

    View Slide

  25. ● The Guild΋Fragment Colocationਪ͍ͯ͠Δ


    ○ Unleash the power of Fragments with GraphQL Codegen


    ● GraphQL Code Generatorͷclient preset


    ○ Fragment Masking͕σϑΥϧτͰ༗ޮ


    ○ Fragment ColocationΛڧ੍͞ΕΔ


    ΤίγεςϜͷํ޲ੑ

    View Slide

  26. React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ

    View Slide

  27. RSCΛ࢖͏͜ͱͰAPIϦΫΤετ͕αʔόʔͰ࣮ߦ͞Ε


    ΢ΥʔλʔϑΥʔϧ໰୊ͷӨڹ͕গͳ͘ͳΔ
    React Server Componentsͷ୆಄ʹΑΔGraphQLͷඞཁੑ
    ֤ίϯϙʔωϯτͰAPIϦΫΤετΛߦ͏͜ͱͰ


    ֤ίϯϙʔωϯτͰσʔλཁ݅ͷఆٛͱऔಘͷ྆ํ͕ՄೳʹͳΔ

    View Slide

  28. RSCͱGraphQLͷڞ௨఺
    ● ແବͳσʔλసૹͷ࡟ݮʹΑΔύϑΥʔϚϯεͷ޲্


    ● ඇಉظσʔλసૹʹUXͷվળ


    ○ GraphQLͷ@deferσΟϨΫςΟϒ


    ○ RSCͷஈ֊తͳετϦʔϛϯά


    View Slide

  29. ύϑΥʔϚϯεͱUXͷ؍఺ʹ͓͍ͯ


    GraphQL͕RSCͰஔ͖׵͑ΒΕΔϢʔεέʔε͸ଘࡏ͢Δ

    View Slide

  30. GraphQL͕༗ޮͳ৔໘
    ● SPAͷ৔߹


    ○ APIϦΫΤετ͸ΫϥΠΞϯτ͔Β࣮ߦ


    ● RSCΑΓ΋GraphQLͷํ͕ίεύ͕ྑ͍৔߹


    ○ RSCಋೖͷΠϯϑϥɾӡ༻ɾֶशίετ͸ߴ͍

    View Slide

  31. 02
    ٕज़બఆͷ؍఺

    View Slide

  32. ● 📍 Fragment Colocation


    ● ⚡ ܕͷࣗಈੜ੒


    ● 🔨 Ωϟογϡػߏ


    ● 📝 ֶशίετ
    ٕज़બఆͷ؍఺

    View Slide

  33. ύϑΥʔϚϯεͱ։ൃऀମݧͷ؍఺Ͱඞཁ


    ؍఺


    ● Fragment Colocationͷ࣮૷ͷ͠΍͢͞


    ● Fragment Colocationʹ͓͚ΔύϑΥʔϚϯεͷ࠷దԽ
    📍 Fragment Colocation

    View Slide

  34. ܕ҆શੑͱҰ؏ੑͷ୲อʹඞཁ


    ؍఺


    ● Query/Mutation/Fragmentͷܕͷࣗಈੜ੒͕Ͱ͖Δ͔
    ⚡ ܕͷࣗಈੜ੒

    View Slide

  35. ωοτϫʔΫϦΫΤετͷ࠷దԽͷͨΊʹඞཁ


    ؍఺


    ● Ωϟογϡػߏͷ༗ແ


    ● Ωϟογϡػߏͷ࢓૊Έ


    ● Ωϟογϡͷѻ͍΍͢͞
    🔨 Ωϟογϡػߏ

    View Slide

  36. ։ൃੜ࢈ੑ޲্ͷͨΊʹඞཁ


    ؍఺


    ● ϥΠϒϥϦͷѻ͍΍͢͞


    ● υΩϡϝϯτ΍৘ใྔͷॆ࣮ੑ


    ● ίϛϡχςΟͷ׆ൃ͞
    📝 ֶशίετ

    View Slide

  37. 03
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

  38. ● Relay


    ● Apollo Client


    ● urql


    ● graphql-request
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

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

    View Slide

  40. ● Relay


    ● Apollo Client


    ● urql


    ● graphql-request
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

  41. ● ։ൃݩɿMeta


    ● GitHub Starɿ18kʢ2023/11/12࣌఺ʣ


    ● ࠾༻ࣄྫɿFacebookɺAtlassian
    Relay

    View Slide

  42. ● Relayͷࢥ૝ͱͯ͠Fragment ColocationΛॏཁࢹ


    ● ࣗવͱFragment Colocationʹ४ڌ࣮ͨ͠૷ʹͳΔ


    ○ Relay CompilerʹΑΔ࠷దͳQueryͷੜ੒


    ○ Data MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ


    ○ Fragment scopedͳม਺
    📍 Fragment Colocation - Relay

    View Slide

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

    View Slide

  44. ● ίϯύΠϥʢRelay CompilerʣΛ಺แ


    ● Relay Compiler͕TypeScriptʢ΋͘͠͸FlowʣͷܕΛࣗಈੜ੒
    ⚡ ܕͷࣗಈੜ੒ - Relay

    View Slide

  45. ● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ


    ● Global Object IdentificationʹΑΔσʔλͷਖ਼نԽ


    ○ άϩʔόϧʹҰҙͳIDΛ૝ఆ


    ○ ͜ΕʹΑΓϦϑΣον΍Ωϟογϡͷߋ৽͕࠷దԽ͞ΕΔ
    🔨 Ωϟογϡػߏ - Relay

    View Slide

  46. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ


    ● ಉ͡Queryͷ৔߹


    ● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡʹଘࡏ͢Δ৔߹
    🔨 Ωϟογϡػߏ - Relay

    View Slide

  47. ● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά


    ● ࠶ϨϯμϦϯά΋࠷దԽ͞ΕΔ


    ○ ֤ίϯϙʔωϯτͰఆٛͨ͠σʔλʹߋ৽͕͋ͬͨ৔߹ͷΈൃՐ


    ○ πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ͜ͱ͕ͳ͍
    🔨 Ωϟογϡػߏ - Relay

    View Slide

  48. ● ߴ͍


    ● ಛʹ೔ຊޠͷ৘ใ͕গͳ͍


    ● GraphQLʹରͯ͠ͷशख़౓͕ٻΊΒΕΔ


    ● ഁյతมߋ͕ଟ͍ͷͰ௥ै͕ඞཁ
    📝 ֶशίετ - Relay

    View Slide

  49. ● Meta͕։ൃ͍ͯ͠ΔͷͰReactͱͷ૬ੑ͕͍͍


    ○ React18ͷSuspenseͳͲ΋ਅͬઌʹରԠ͞Εͨ


    ● Relay CompilerʹΑΔGraphQLͷ໋໊نଇͷڧ੍


    ● શମతʹGraphQLͷ࢓༷ʹ४ڌ
    ͦͷଞͷಛ௃ - Relay

    View Slide

  50. ● Relay


    ● Apollo Client


    ● urql


    ● graphql-request
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

  51. ● ։ൃݩɿApollo Graph Inc.


    ● GitHub Starɿ19kʢ2023/11/12࣌఺ʣ


    ● ࠾༻ࣄྫɿMediumɺCircleCI
    Apollo Client

    View Slide

  52. ● Apollo Client୯ମͰ͸೉͍͠


    ○ v3.8͔ΒuseFragment͕Stableʹͳ͕ͬͨɺॾʑͷػೳ͕଍Γͳ͍ҹ৅


    ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ


    ○ client presetͷFragment MaskingʹΑΔσʔλ΁ͷΞΫηε੍ޚ


    ○ ≒ RelayͷDataMasking
    📍 Fragment Colocation - Apollo Client

    View Slide

  53. 📍 Fragment Colocation - Apollo Client

    View Slide

  54. 📍 Fragment Colocation - Apollo Client

    View Slide

  55. ● GraphQL Code GeneratorΛซ༻͢Δ͜ͱͰ࣮ݱՄೳ


    ● TypedDocumentNodeʹΑΔܕਪ࿦


    ○ ܕ෇͚͞ΕͨDocumentNodeΦϒδΣΫτΛ࡞੒͢ΔͨΊͷ։ൃπʔϧ


    ○ Apollo ClientҎ֎ͷϥΠϒϥϦͰ΋࢖༻Մೳ
    ⚡ ܕͷࣗಈੜ੒ - Apollo Client

    View Slide

  56. ● σʔλΛਖ਼نԽͯ͠อ࣋͢ΔΩϟογϡػߏΛ࣋ͭ


    ● Ұҙͳࣝผࢠͷੜ੒ʹΑΔσʔλͷਖ਼نԽ


    ○ idͱ__typenameΛ݁߹ͨ͠Ωϟογϡ༻ͷࣝผࢠΛੜ੒
    🔨 Ωϟογϡػߏ - Apollo Client

    View Slide

  57. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ


    ● ಉ͡Queryͷ৔߹


    ● ҟͳΔQueryͰཁٻσʔλ͕Ωϟογϡ͕ଘࡏ͢Δ৔߹
    🔨 Ωϟογϡػߏ - Apollo Client

    View Slide

  58. ● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά


    ● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ


    ○ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ
    🔨 Ωϟογϡػߏ - Apollo Client

    View Slide

  59. ● ී௨


    ● ίϛϡχςΟ͕׆ൃ


    ● ೔ຊޠͷ৘ใ͕ॆ࣮͍ͯ͠Δ


    ● ৘ใ͕๛෋ͳ൓໘ɺػೳ΋ଟ͍
    📝 ֶशίετ - Apollo Client

    View Slide

  60. ● Apollo LinkͳͲͷपลϥΠϒϥϦ͕ॆ࣮͍ͯ͠Δ


    ● Relay΍urqlͱൺ΂ͯ։ൃ͕஗Ε͍ͯΔ


    ○ e.g. React18ͷSuspense΁ͷରԠ͕ະ׬ྃʢ2023/11/12࣌఺ʣ
    ͦͷଞͷಛ௃ - Apollo Client

    View Slide

  61. ● Relay


    ● Apollo Client


    ● urql


    ● graphql-request
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

  62. ● ։ൃݩɿFormidable


    ● GitHub Starɿ8.2kʢ2023/11/12࣌఺ʣ


    ● ࠾༻ࣄྫɿGitHubɺTripadvisor
    urql

    View Slide

  63. ● Apollo Clientͱಉ༷


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

    View Slide

  64. ● Apollo Clientͱಉ༷


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

    View Slide

  65. ● Document Cacheͱݺ͹ΕΔΩϟογϡػߏΛ࣋ͭ


    ● QueryͱVariablesͷ૊Έ߹Θͤ͝ͱʹΩϟογϡΛอ࣋
    🔨 Ωϟογϡػߏ - urql

    View Slide

  66. Ωϟογϡ͕ར༻͞ΕΔ৔߹ͷྫ


    ● ಉ͡Queryͷ৔߹
    🔨 Ωϟογϡػߏ - urql

    View Slide

  67. ● Apollo Clientͱಉ༷


    ● Ωϟογϡͷߋ৽Λݕ஌ͯ͠ίϯϙʔωϯτΛ࠶ϨϯμϦϯά


    ● QueryΛ࣮ߦ͍ͯ͠Δίϯϙʔωϯτ͕࠶ϨϯμϦϯά͞ΕΔ


    ○ Relayͱ͸ҧ͍πϦʔશମ͕࠶ϨϯμϦϯά͞ΕΔ
    🔨 Ωϟογϡػߏ - urql

    View Slide

  68. ● ਖ਼نԽ͞ΕͨΩϟογϡΛར༻͢Δ͜ͱ΋Մೳ


    ● ਖ਼نԽͷϩδοΫ͸Apollo Clientͱಉ༷
    🔨 Ωϟογϡػߏ - urql

    View Slide

  69. ● ௿͍


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

    View Slide

  70. ● όϯυϧαΠζ͕খ͍͞


    ● ExchangeʹΑΔ֦ு͕Մೳ


    ○ ≒ GraphQLͷϦΫΤετ/ϨεϙϯεΛॲཧ͢ΔͨΊͷϛυϧ΢ΣΞ
    ͦͷଞͷಛ௃ - urql

    View Slide

  71. ● Relay


    ● Apollo Client


    ● urql


    ● graphql-request
    GraphQLΫϥΠΞϯτͷൺֱ

    View Slide

  72. ● ։ൃݩɿJason Kuhrtࢯ


    ● GitHub Starɿ5.5kʢ2023/11/12࣌఺ʣ


    ● ࠾༻ࣄྫɿஶ໊ͳاۀͰ͸ͳ͠
    graphql-request

    View Slide

  73. ● Apollo Clientͱಉ༷


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

    View Slide

  74. ● Apollo Clientͱಉ༷


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

    View Slide

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

    View Slide

  76. ● ۃΊͯ௿͍


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

    View Slide

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

    View Slide

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

    View Slide

  79. ● Ωϟογϡػߏ͕ෆཁͳΒgraphql-request


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

    View Slide

  80. ● ୈҰީิͱͯ͠Relay


    ● ࣍఺ͰApollo Client or urql
    Ωϟογϡػߏ͕ඞཁͳ৔߹

    View Slide

  81. ͳ͔ͥʁ

    View Slide

  82. GraphQLಋೖͷҰ൪ͷ໨త͸

    ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹΑΔύϑΥʔϚϯεͱUXͷ޲্

    View Slide

  83. ● Fragment Colocationͷ࠾༻͕ඞਢ


    ● ͦͷࢥ૝ʹैͬͯ࠷దԽ͞Ε͍ͯΔͷ͸ݱঢ়Ͱ͸RelayͷΈ


    ● ֶशίετ͸ߴ͍͕ɺͦΕʹݟ߹͏Ϧλʔϯ͸େ͍ʹ͋Δ
    ωοτϫʔΫτϥϑΟοΫͷ࠷దԽʹ͓͍ͯ

    View Slide

  84. ● Apollo ClientͰ࢖͍͍ͨػೳ͕ͳ͍ͳΒurql


    ○ ࣮ݱ͍ͨ͜͠ͱʹରͯ͠Apollo Client͸Φʔόʔͳέʔε͕ଟ͍


    ○ େମͷϢʔεέʔε͸urqlΧόʔͰ͖Δ


    ● Apollo Clientͷෳࡶ͞ނͷ໰୊΋͋Δ


    ○ όʔδϣϯΞοϓʹ൐͏ΩϟογϡपΓσάϨ


    ○ React΁ͷ௥ैͷ஗Ε
    Apollo Client ͱ urql

    View Slide

  85. 04
    ۩ମతͳબఆࣄྫ

    View Slide

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

    View Slide

  87. ● ϓϩμΫτͷཁ݅తʹ΋Ωϟογϡػߏ͸ඞཁ


    ● GraphQLࣗମ͕ॳΊͯͩͬͨͷ΋͋Γಋೖͷ͠΍͢͞Λ༏ઌ


    ● ౰࣌͸࠾༻ࣄྫ΋গͳ͔ͬͨͷ΋͋Γurqlͷ࠾༻͸ݟૹΓ
    બఆཧ༝

    View Slide

  88. ● ಋೖ΋εϜʔζͰ։ൃॳظ͸໰୊ͳ͔ͬͨ


    ● ։ൃ͕ਐΉʹͭΕͯ໰୊͕ൃੜ


    ○ ΩϟογϡपΓͷෆ۩߹


    ○ Fragment Colocationͷڧ੍͕Ͱ͖ͳ͍


    ○ Suspense΁ͷରԠͷ஗Ε
    ։ൃͯ͠Έͯ

    View Slide

  89. ● ్தͰRelay΁ͷ৐Γ׵͑΋ݕ౼͕ͨ͠அ೦


    ● αʔόʔ͕Global Object Identificationʹ४ڌͰ͖ͳ͔ͬͨ
    Relay΁ͷ৐Γ׵͑

    View Slide

  90. ● client preset΁Ҡߦͯ͠ɺFragment Colocationͷڧ੍


    ● ESLintͰ໋໊نଇͷϧʔϧ௥Ճ
    Apollo ClientΛ࢖͍ଓ͚Δํ޲Ͱ؀ڥ੔උʹ஫ྗ

    View Slide

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

    View Slide

  92. ● v3.8ͰuseFragment͕Stableʹͳͬͨ


    ○ Fragmentͷߋ৽ͷΈΛݕ஌ͯ͠࠶ϨϯμϦϯά


    ○ Suspense͸ະରԠͰɺଞʹ΋੍໿͕͋ΔͷͰར༻͸·ͩ೉͍͠


    ● ͜ͷล͕ॆ࣮ͯ͘͠Ε͹࠾༻ͷ༏ઌ౓্͕͕Δ͔΋ʁ
    Apollo Clientͷࠓޙ

    View Slide

  93. ● GraphQLΛ࠷େݶ׆༻͢Δʹ͸Fragment Colocation͕ॏཁ


    ● ͦͷ؍఺Ͱ͸GraphQLΫϥΠΞϯτ͸Relay͕͓͢͢Ί


    ● ଞͷΫϥΠΞϯτͰ΋͍ۙମݧ͸ಘΒΕΔΑ͏ʹͳͬͯདྷͯΔ
    ·ͱΊ

    View Slide

  94. THANK YOU

    View Slide