Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQLとの向き合い方2022年版

 GraphQLとの向き合い方2022年版

Yosuke Kurami

February 22, 2022
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. GraphQLͱͷ޲͖߹͍ํ
    2022 ೥൛
    @Quramy 2022.02.22
    #fec_fukuoka

    View full-size slide

  2. ๻ͱ#fec_fukuoka
    - 2019೥ʹ։࠵͞Εͨࡍʹొஃͤͯ͞΋Β͍·ͨ͠
    - https://speakerdeck.com/quramy/vrt-in-action

    View full-size slide

  3. About me
    - Twitter / GitHub: @Quramy
    - ϦΫϧʔτͰWebϑϩϯτΤϯδχΞ΍ͬͯ·͢
    (ࠓ͸ແ৬͡Όͳ͍Αʂ)
    - 2021೥7݄ࠒ͔ΒελσΟαϓϦͷ࢓ࣄΛ͢ΔΑ
    ͏ʹͳΓ·ͨ͠

    View full-size slide

  4. ࠓ೔࿩͢͜ͱ
    - 2021೥7݄ࠒΑΓ
    ʰελσΟαϓϦ தֶߨ࠲ʱϕʔγοΫίʔε ϦχϡΞʔϧ Prj
    ͱ͍͏ GraphQLΛ࠾༻ͨ͠PrjʹδϣΠϯ
    - ઌ೔ʢͱ͍͏͔ࡢ೔ʣແࣄϦϦʔε͞Ε·ͨ͠ɻ΍ͬͨͶʂ
    - ͜ͷ Prj ʹͯ GraphQLΛ࢖͏্ͰɺͲͷΑ͏ͳ͜ͱΛߟ͑ͨͷ͔ɾͲΜ
    ͳؾ͖͕͔ͮ͋ͬͨɺΛத৺ʹ࿩͍͖ͯ͠·͢

    View full-size slide

  5. Agenda
    1. Why GraphQL
    2. How GraphQL
    3. Future of GraphQL

    View full-size slide

  6. 1. Why GraphQL

    View full-size slide

  7. Why GraphQL
    - GraphQLͷಛ௃:
    - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ

    View full-size slide

  8. Why GraphQL
    - GraphQLͷಛ௃:
    - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ

    View full-size slide

  9. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - աڈʹผPrjͰൃੜ͍ͯͨ͠՝୊:
    - RESTish API / FrontendΛ୯ಠͷ։ൃऀͰ։ൃͰ͖ͯ͠·͏৔߹ɺ
    UndocumentedͳAPI͕ੜ·Εͯ͠·͍͕ͪ
    - e.g. Responseͷxxxͱ͍͏ΦϒδΣΫτ͸nullableͳͷ͔ෆ໌
    - ͜ͷAPIΛར༻͢ΔFrontend։ൃऀͷෛ୲ʹ…
    (Web Frontend༻ʹ࡞ΒΕͨAPIΛNative App͔Β࠶ར༻͢Δࡍʹݦࡏ
    Խ)

    View full-size slide

  10. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - GraphQLͷ৔߹ʮSchemaΛఆٛ͠ͳ͍ͱFrontend͸։ൃͰ͖ͳ͍ʯͱ
    ͍͏੍໿͕͋Δ
    - ※ RESTish APIͰ΋ɺOpen APIͳͲͷπʔϧνΣΠϯΛ͔ͬ͠Γར༻͢
    Ε͹Documentation ͢Δ͜ͱ͸ՄೳͰ͋Δ͕ɺ๞͘·Ͱ opt-in

    View full-size slide

  11. Why GraphQL
    - GraphQLͷಛ௃:
    - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ
    - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ

    View full-size slide

  12. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - GraphQL v.s. RESTish API ͷ࠷େͷҧ͍
    https://qconnewyork.com/ny2015/system/files/presentation-slides/
    qcon_dda_2015_iwork09_boguta_nolen.pdf
    - GraphQL: Demand Driven Architecture
    - RESTish API: Supply Driven Architecture
    - ʮGraphQLΛ࠾༻͢Δʯʹ͸ɺ͜ͷੑ࣭ͷҧ͍Λࠎͷ਷·Ͱୟ͖ࠐΜͰ
    ͓͘΂͖

    View full-size slide

  13. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - Demand Driven Architectureͱ͸
    - ʮϨεϙϯεͷܗΛClient͕ܾఆͰ͖ΔʯλΠϓͷ௨৴ํ๏
    - e.g. GraphQL, SQL, SPARQL, etc…
    - Supply Driven Architectureͱ͸
    - ʮϨεϙϯεͷܗ͕ࣜServerͰܾఆ͞ΕΔʯλΠϓ
    - e.g. REST, SOAP, etc…

    View full-size slide

  14. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - ʮClientʹΫΤϦͷܾఆݖ͕͋Δʯ͕ޮ͍ͯ͘Δྫͱͯ͠ɺෳ਺ͷ
    Frontend ͕ڍ͛ΒΕΔ
    - աڈͷผPrjͰ͸ɺWeb Frontend ޲͚ʹ࣮૷ɾެ։ͨ͠ RESTish API
    ΛNative App͔Β࠶ར༻͢ΔΞϓϩʔνΛ࠾͍ͬͯͨ
    - ͜ͷPrjͰͷAPI͸Web FrontendʹಛԽ࣮ͨ͠૷͕ͳ͞Ε͍ͯͨͨΊɺ
    ඞͣ͠΋Native App͔Β࢖͍΍͍͢Θ͚Ͱ͸ͳ͔ͬͨ
    (Smart UI patternͷฐ֐)

    View full-size slide

  15. ClientʹΫΤϦͷܾఆݖ͕͋Δ
    - GraphQLͷ৔߹ɺ(SchemaʹఆΊΒΕ͍ͯΔൣғʹ͓͍ͯ͸) Ϩεϙ
    ϯεͷܗࣜ͸Frontendଆ͕ࣗ༝ʹܾΊΔ͜ͱ͕Ͱ͖Δ
    - ࣮ࡍɺݱPrjͰ͸Web Frontend ͕Native AppΑΓ΋ޙ͔ΒࢀՃ͕ͨ͠
    ʮWeb Frontend ʹͱͬͯඞཁे෼ͳΫΤϦʯΛطଘͷSchema͔Βى͜
    ͚ͩ͢ͰࡁΜͩ

    View full-size slide

  16. (ࢀߟ) Backend For Frontend
    - ෳ਺छྨ Frontend ͕ଘࡏ͢Δ৔߹ɺͦΕͧΕͷ Client छผʹରͯ͠
    BFF Λ࣮૷͢Ε͹ɺݸʑͷBFF͕Smart UIʹͳͬͨͱ͜ΖͰ໰୊ͳ͍
    - ͨͩ͠ Backend ͱ͸ผʹ͞Βʹதؒ૚ͷ Server Λ༻ҙ͢Δ͜ͱʹͳΔ
    ͨΊɺ։ൃ޻਺্ͷτϨʔυΦϑ͕ൃੜ͢Δ
    ·ͨɺNative App޲͚ͷBFFΛʮ୭͕ʯʮͲͷΑ͏ʹʯ։ൃ͢Δͷ͔ɺ͕໰୊ʹͳΓ΍͍͢
    ҹ৅

    View full-size slide

  17. Why GraphQL
    - ͜͜·Ͱͷ·ͱΊ
    - աڈ Prj ʹ͓͍ͯɺWeb / Native Frontend Λ RESTish API Ͱ։ൃͯ͠
    ্͍͘Ͱͷ՝୊͕͋ͬͨ
    - Undocumented, (Supply Driven͕Ώ͑ͷ) Smart UI
    - GraphQL ͷ Schema / Demand Driven ͕͜ΕΒͷղফʹ໾ཱͭΛ͜
    ͱظ଴ͯ͠࠾༻

    View full-size slide

  18. 2. How GraphQL

    View full-size slide

  19. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience

    View full-size slide

  20. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience

    View full-size slide

  21. Schema Driven Development
    - GraphQL Schema ͸ IDL(Interface Definition Language) ʹ૬౰
    - Schema Λ࣮૷͢Δଆ (Backend Devs) / ར༻ଆ (Frontend Devs) Ͱٞ࿦
    ܾͯ͠ఆ͢Δ
    4DIFNB
    J04
    EFWT
    "OESPJE
    EFWT
    8FC'&
    EFWT
    #BDLFOE
    EFWT
    Implement resolvers
    Query / Mutation

    View full-size slide

  22. J04EFWT
    #BDLFOEEFWT
    8FC'&EFWT

    View full-size slide

  23. J04EFWT
    #BDLFOEEFWT
    8FC'&EFWT
    4DIFNB͸։ൃऀશһͰҭͯΔ΋ͷʂ

    View full-size slide

  24. Schema Driven Development
    ࣮૷ʹ͕͔͔࣌ؒΓͦ͏ͳ Schema มߋͷ৔߹ɺ࣍ͷϑϩʔͰ։ൃΛ͢͢
    ΊΔ͜ͱ΋
    1. SDL ΛօͰٞ࿦ͯ͠ఆΊΔ
    2. ઌʹ Mock Λॻ͘ (apollo-server ͷ Mock Resolver Λར༻)
    3. Frontend: Mock Λར༻͠ͳ͕Β UI Λ࣮૷
    4. Backend: SDL / MockΛோΊͳ͕Β࣮ Resolver Λ࣮૷

    View full-size slide

  25. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience

    View full-size slide

  26. Paradigm Shift
    - GraphQL ͷʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯͷಛੑ্ɺRESTish API
    Λར༻ͨ͠։ൃͱ͸ߟ͑ํΛม͑Δඞཁ͕͋ΔՕॴ͕͋Δ
    - Ұํ Prj ࢀըऀશһ͕࠷ॳ͔Β GraphQL ʹ໌Δ͍ͱ͸ݶΒͳ͍
    - Prj ൃ଍࣌ʹ PoC Sprint Λ࣮ࢪ (Backend / Native devs)
    Web Frontend νʔϜ͸ൃ଍λΠϛϯά͕ҟͳ͍ͬͯͨͨΊɺผ్ษ
    ڧձͰΧόʔ

    View full-size slide

  27. GraphQL Workshop
    - Web Frontend devs ޲͚ͷ GraphQL Workshop ࢿྉ͸ҎԼͷURLͰެ
    ։ͯ͠·͢
    - https://github.com/Quramy/gql-study-workshop
    - React.js / Apollo Client Λ࢖͍ɺͪΐͬͱͨ͠ΞϓϦέʔγϣϯΛ։
    ൃ͢ΔྲྀΕΛ1͔Βֶ΂ΔΑ͏ʹઃܭ
    - Normalized Cache΍Fragment Colocation ͳͲͷ֓೦΋Χόʔ

    View full-size slide

  28. Fragment ͱ Query Composition
    - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation ͷߟ
    ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ.
    - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ
    - Component Oriented Design (e.g. Atomic Design)
    - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ

    View full-size slide

  29. Fragment ͱ Query Composition
    - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation ͷߟ
    ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ.
    - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ
    - Component Oriented Design (e.g. Atomic Design)
    - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ
    'SBHNFOU$PMPDBUJPOͰ͜ΕΒ͕਌࿨͢Δ

    View full-size slide

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

    View full-size slide

  31. How GraphQL
    - Schema Driven Development
    - Paradigm Shift
    - Tools / Developer Experience

    View full-size slide

  32. GraphQL ͱ Toolୡ
    - graphql-code-generator
    - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒
    - SDL͔Β resolverͷܕΛੜ੒
    - ts-graphql-plugin (ࣗ࡞)
    - tsxϑΝΠϧ಺ͰͷGraphQL ΫΤϦͷิ׬ʹར༻
    - Apollo CLI
    - GraphQL ΫΤϦ͔Β persisted queryͷநग़

    View full-size slide

  33. GraphQL ͱ Toolୡ
    - graphql-code-generator
    - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒
    - SDL͔Β resolverͷܕΛੜ੒
    - ts-graphql-plugin (ࣗ࡞)
    - tsxϑΝΠϧ಺ͰͷGraphQL ΫΤϦͷิ׬ʹར༻
    - Apollo CLI
    - GraphQL ΫΤϦ͔Β persisted queryͷநग़
    ׂͱఆ൪ײ͋ΔͷͰࠓ೔͸ׂѪ

    View full-size slide

  34. Persisted Query
    - Persisted Query is Կ:
    - GraphQLΫΤϦͷຊจͱରͱͳΔϋογϡΛServerʹڭ͑ࠐΜͰ͓͖ɺ ΫΤϦຊจΛPOST͢Δ୅ΘΓ
    ʹ ֘౰ͷϋογϡΛURLʹ෇༩ͯ͠ GET ͢Δٕज़
    https://qiita.com/Quramy/items/b3943a0c27f3ade2c57d
    - Persisted Query Λಋೖ͢Δ͜ͱͰ
    - ServerଆͰͷQuery parsingͷίετ࡟ݮ
    - ະొ࿥ͷQueryΛ஄͘Α͏ʹ͢Ε͹ɺServerΛѱҙͷ͋ΔΫΤϦ͔Β๷ޚͰ͖Δ

    View full-size slide

  35. Persisted Query
    - ServerΛѱҙ͋ΔΫΤϦ͔Β๷ޚ͢ΔͨΊɺొ࿥ࡁΈͷΫΤϦͷΈڐՄ
    - ͜ΕΛ࣮ݱ͢ΔͨΊɺݱPrjͰ͸ Apollo CLIͷ extract ίϚϯυΛ࣮ߦ
    ͯ͠ʮFrontend͔Βൃߦ͞Ε͍ͯΔΫΤϦͷશͯʯΛ؅ཧ͍ͯ͠Δ
    (ݱঢ়Ͱ͸GitHub্ͷιʔείʔυѻ͍. Ώ͘Ώ͘͸ม͑Δ͔΋)
    - ΫΤϦΛServerʹొ࿥ͤͣʹdeployͰ͖ͳ͍࢓૊Έ΋੔උத

    View full-size slide

  36. Persisted Query
    - ୨΅ͨతͳԸܙ΋
    - ʮFragment ͕౷߹͞ΕͨΫΤϦʯ͕Ұׅ؅ཧ͞Ε͍ͯΔ
    - ts ΍ swiftͷίʔυ্ɺΫΤϦ͸ Fragment ͕෼ࢄ؅ཧ͞Ε͍ͯΔ͕ɺ
    Persisted Query ͷͨΊͷʮநग़͞ΕͨΫΤϦʯΛඥղ͚͹ɺ࣮ࡍʹͲ
    ͷΑ͏ͳΫΤϦ͕ඈͿͷ͔͙͢ʹ೺ѲͰ͖Δ
    - Persisted Query Λ૊ΈࠐΉ͔൱͔ͱؔ܎ͳ͘ɺApollo CLI Ͱextract ͠
    ͨΫΤϦΛօ͕ݟ͑Δͱ͜ΖͰڞ༗͓ͯ͘͠ͱΑ͍

    View full-size slide

  37. How GraphQL
    - ͜͜·Ͱͷ·ͱΊ
    - Schema: Backend / Frontend ؔ܎ͳ͘ Devs օͰٞ࿦ͯ͠ҭͯΔ
    - Query: UI ຤୺͔Β૊Έ্͍͛ͯ͘ͱ͍͏ҙຯͰ Frontend ͷ΋ͷ
    ҰํͰ ʮPrj ʹͲͷΑ͏ͳQuery͕ଘࡏ͍ͯ͠Δͷ͔ʯΛՄࢹԽ͓ͯ͠
    ͘ͱ৭ʑศར
    - REST API ʹ͸ଘࡏ͠ͳ͍֓೦΋ग़ͯ͘Δ͚ͲɺօͰ΍Ε͹ා͘ͳ͍

    View full-size slide

  38. 3. Future of GraphQL

    View full-size slide

  39. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)

    View full-size slide

  40. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)

    View full-size slide

  41. @defer / @stream
    - GraphQL Working Group Ͱݕ౼தͷ৽͍͠σΟϨΫςΟϒ
    - https://github.com/graphql/graphql-wg/blob/main/rfcs/DeferStream.md
    - https://graphql.org/blog/2020-12-08-improving-latency-with-defer-and-stream-
    directives/
    - https://medium.com/@quramy/incremental-data-delivery-with-graphql-defer-and-
    stream-d779b5e38833

    View full-size slide

  42. @defer / @stream
    - ྫ: ҎԼͷΑ͏ͳΫΤϦ͕͋ͬͨͱͯ͠ɺ
    specialPrice field ͷܭࢉίετ͕େ͖͔ͬͨͱ͢Δ

    View full-size slide

  43. @defer / @stream
    - Query͕શͯղܾ͞ΕΔ·ͰClient͸ඳըΛ։࢝Ͱ͖ͳ͍

    View full-size slide

  44. @defer / @stream
    - ΋ͬͱࡉ͔͘ඳըΛίϯτϩʔϧ͍ͨ͠
    -> ͜ΕΛ࣮ݱ͢ΔͨΊͷσΟϨΫςΟϒ

    View full-size slide

  45. @defer / @stream
    - 1 Operation : ෳ਺ ResponseͱͳΔ
    - Fragment ʹ෇༩
    - React.js ͷ Suspense for data fetch ͱ
    ਌࿨ੑߴ͍(͸ͣ)
    - ݱPrjͰ΋ར༻Ͱ͖Δͱ͜Ζ͕͋Γͦ͏
    (ϗʔϜը໘ͳͲɺෳ਺fieldΛ·ͱΊͯऔಘ͍ͯ͠ΔՕॴ)
    query ProductDetailQuery {
    product(id: 100) {
    id
    name
    imageURL
    ...DeferredPrice @defer
    }
    }
    fragment DeferredPrice on Product {
    specialPrice
    }

    View full-size slide

  46. Future of GraphQL
    - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ
    - defer / stream directive
    - Apollo Client v4
    - etc ,,, (Federation ͳͲ)

    View full-size slide

  47. Apollo Client v4
    - https://github.com/apollographql/apollo-client/issues/8245
    -

    View full-size slide

  48. Apollo Client v4
    - લड़ͷ @defer / @stream ʹ͍ͭͯ΋ಉ͜͡ͱ͕ݴ͑Δ͸͕ͣͩɺ
    fragmentΛҰڃࢢຽʹ͍͔ͯ͠ͳ͍ͱɺGraphQL Spec΍React ଆͷਐ
    Խ(ಛʹSuspense for Data fetching)ʹ଱͑ΒΕͳ͘ͳͬͯ͘Δ͸ͣ
    - ݱঢ়ͷApollo Clientʹ͸ useFragment ͷΑ͏ͳhook͕ଘࡏ͍ͯ͠ͳ͍
    ͕ɺv4Ͱ͸͜Ε͕ੜ·Εͦ͏
    - Fragmentͷѻ͍ͱ͍͏ҙຯͰ͸Facebook Relay ͷํ͕खް͘޲͖߹ͬ
    ͯΔ

    View full-size slide

  49. Apollo Client v4
    - Apollo Client v3.6 Ͱ͸ Breaking Change͸ߦΘΕͳ͍͕ɺv4Ͱ
    useLazyQuery΍ partial fetching ͳͲͷҰ෦͕࡟আ͞ΕΔՄೳੑ͕͋Δ
    - ͜ΕΒͷػೳʹ͋·Γґଘ͠ͳ͍ํ͕Α͍
    - (ͱ͸ݴ͑ useLazyQuery ͷ୅ସखஈ͸Ṗʣ

    View full-size slide

  50. ͓ΘΓʹ
    - GraphQL Tokyo ͱ͍͏meetup Λఆظతʹ։࠵͍ͯ͠·͢
    - https://www.meetup.com/ja-JP/GraphQL-Tokyo/
    - ࣍ճ͸ 2022.02.24. ྑ͚Ε͹དྷ͍ͯͩ͘͞!

    View full-size slide