Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

GraphQLとの向き合い方2022年版

 GraphQLとの向き合い方2022年版

Yosuke Kurami

February 22, 2022
Tweet

More Decks by Yosuke Kurami

Other Decks in Programming

Transcript

  1. ࠓ೔࿩͢͜ͱ - 2021೥7݄ࠒΑΓ ʰελσΟαϓϦ தֶߨ࠲ʱϕʔγοΫίʔε ϦχϡΞʔϧ Prj ͱ͍͏ GraphQLΛ࠾༻ͨ͠PrjʹδϣΠϯ -

    ઌ೔ʢͱ͍͏͔ࡢ೔ʣແࣄϦϦʔε͞Ε·ͨ͠ɻ΍ͬͨͶʂ - ͜ͷ Prj ʹͯ GraphQLΛ࢖͏্ͰɺͲͷΑ͏ͳ͜ͱΛߟ͑ͨͷ͔ɾͲΜ ͳؾ͖͕͔ͮ͋ͬͨɺΛத৺ʹ࿩͍͖ͯ͠·͢
  2. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ - աڈʹผPrjͰൃੜ͍ͯͨ͠՝୊: - RESTish API / FrontendΛ୯ಠͷ։ൃऀͰ։ൃͰ͖ͯ͠·͏৔߹ɺ UndocumentedͳAPI͕ੜ·Εͯ͠·͍͕ͪ -

    e.g. Responseͷxxxͱ͍͏ΦϒδΣΫτ͸nullableͳͷ͔ෆ໌ - ͜ͷAPIΛར༻͢ΔFrontend։ൃऀͷෛ୲ʹ… (Web Frontend༻ʹ࡞ΒΕͨAPIΛNative App͔Β࠶ར༻͢Δࡍʹݦࡏ Խ)
  3. 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Λ࠾༻͢Δʯʹ͸ɺ͜ͷੑ࣭ͷҧ͍Λࠎͷ਷·Ͱୟ͖ࠐΜͰ ͓͘΂͖
  4. ClientʹΫΤϦͷܾఆݖ͕͋Δ - Demand Driven Architectureͱ͸ - ʮϨεϙϯεͷܗΛClient͕ܾఆͰ͖ΔʯλΠϓͷ௨৴ํ๏ - e.g. GraphQL,

    SQL, SPARQL, etc… - Supply Driven Architectureͱ͸ - ʮϨεϙϯεͷܗ͕ࣜServerͰܾఆ͞ΕΔʯλΠϓ - e.g. REST, SOAP, etc…
  5. ClientʹΫΤϦͷܾఆݖ͕͋Δ - ʮClientʹΫΤϦͷܾఆݖ͕͋Δʯ͕ޮ͍ͯ͘Δྫͱͯ͠ɺෳ਺ͷ Frontend ͕ڍ͛ΒΕΔ - աڈͷผPrjͰ͸ɺWeb Frontend ޲͚ʹ࣮૷ɾެ։ͨ͠ RESTish

    API ΛNative App͔Β࠶ར༻͢ΔΞϓϩʔνΛ࠾͍ͬͯͨ - ͜ͷPrjͰͷAPI͸Web FrontendʹಛԽ࣮ͨ͠૷͕ͳ͞Ε͍ͯͨͨΊɺ ඞͣ͠΋Native App͔Β࢖͍΍͍͢Θ͚Ͱ͸ͳ͔ͬͨ (Smart UI patternͷฐ֐)
  6. (ࢀߟ) Backend For Frontend - ෳ਺छྨ Frontend ͕ଘࡏ͢Δ৔߹ɺͦΕͧΕͷ Client छผʹରͯ͠

    BFF Λ࣮૷͢Ε͹ɺݸʑͷBFF͕Smart UIʹͳͬͨͱ͜ΖͰ໰୊ͳ͍ - ͨͩ͠ Backend ͱ͸ผʹ͞Βʹதؒ૚ͷ Server Λ༻ҙ͢Δ͜ͱʹͳΔ ͨΊɺ։ൃ޻਺্ͷτϨʔυΦϑ͕ൃੜ͢Δ ·ͨɺNative App޲͚ͷBFFΛʮ୭͕ʯʮͲͷΑ͏ʹʯ։ൃ͢Δͷ͔ɺ͕໰୊ʹͳΓ΍͍͢ ҹ৅
  7. Why GraphQL - ͜͜·Ͱͷ·ͱΊ - աڈ Prj ʹ͓͍ͯɺWeb / Native

    Frontend Λ RESTish API Ͱ։ൃͯ͠ ্͍͘Ͱͷ՝୊͕͋ͬͨ - Undocumented, (Supply Driven͕Ώ͑ͷ) Smart UI - GraphQL ͷ Schema / Demand Driven ͕͜ΕΒͷղফʹ໾ཱͭΛ͜ ͱظ଴ͯ͠࠾༻
  8. 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
  9. Schema Driven Development ࣮૷ʹ͕͔͔࣌ؒΓͦ͏ͳ Schema มߋͷ৔߹ɺ࣍ͷϑϩʔͰ։ൃΛ͢͢ ΊΔ͜ͱ΋ 1. SDL ΛօͰٞ࿦ͯ͠ఆΊΔ

    2. ઌʹ Mock Λॻ͘ (apollo-server ͷ Mock Resolver Λར༻) 3. Frontend: Mock Λར༻͠ͳ͕Β UI Λ࣮૷ 4. Backend: SDL / MockΛோΊͳ͕Β࣮ Resolver Λ࣮૷
  10. Paradigm Shift - GraphQL ͷʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯͷಛੑ্ɺRESTish API Λར༻ͨ͠։ൃͱ͸ߟ͑ํΛม͑Δඞཁ͕͋ΔՕॴ͕͋Δ - Ұํ

    Prj ࢀըऀશһ͕࠷ॳ͔Β GraphQL ʹ໌Δ͍ͱ͸ݶΒͳ͍ - Prj ൃ଍࣌ʹ PoC Sprint Λ࣮ࢪ (Backend / Native devs) Web Frontend νʔϜ͸ൃ଍λΠϛϯά͕ҟͳ͍ͬͯͨͨΊɺผ్ษ ڧձͰΧόʔ
  11. GraphQL Workshop - Web Frontend devs ޲͚ͷ GraphQL Workshop ࢿྉ͸ҎԼͷURLͰެ

    ։ͯ͠·͢ - https://github.com/Quramy/gql-study-workshop - React.js / Apollo Client Λ࢖͍ɺͪΐͬͱͨ͠ΞϓϦέʔγϣϯΛ։ ൃ͢ΔྲྀΕΛ1͔Βֶ΂ΔΑ͏ʹઃܭ - Normalized Cache΍Fragment Colocation ͳͲͷ֓೦΋Χόʔ
  12. Fragment ͱ Query Composition - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation

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

    ͷߟ ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ. - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ - Component Oriented Design (e.g. Atomic Design) - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ 'SBHNFOU$PMPDBUJPOͰ͜ΕΒ͕਌࿨͢Δ
  14. GraphQL ͱ Toolୡ - graphql-code-generator - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒ -

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

    SDL͔Β resolverͷܕΛੜ੒ - ts-graphql-plugin (ࣗ࡞) - tsxϑΝΠϧ಺ͰͷGraphQL ΫΤϦͷิ׬ʹར༻ - Apollo CLI - GraphQL ΫΤϦ͔Β persisted queryͷநग़ ׂͱఆ൪ײ͋ΔͷͰࠓ೔͸ׂѪ
  16. Persisted Query - Persisted Query is Կ: - GraphQLΫΤϦͷຊจͱରͱͳΔϋογϡΛServerʹڭ͑ࠐΜͰ͓͖ɺ ΫΤϦຊจΛPOST͢Δ୅ΘΓ

    ʹ ֘౰ͷϋογϡΛURLʹ෇༩ͯ͠ GET ͢Δٕज़ https://qiita.com/Quramy/items/b3943a0c27f3ade2c57d - Persisted Query Λಋೖ͢Δ͜ͱͰ - ServerଆͰͷQuery parsingͷίετ࡟ݮ - ະొ࿥ͷQueryΛ஄͘Α͏ʹ͢Ε͹ɺServerΛѱҙͷ͋ΔΫΤϦ͔Β๷ޚͰ͖Δ
  17. Persisted Query - ServerΛѱҙ͋ΔΫΤϦ͔Β๷ޚ͢ΔͨΊɺొ࿥ࡁΈͷΫΤϦͷΈڐՄ - ͜ΕΛ࣮ݱ͢ΔͨΊɺݱPrjͰ͸ Apollo CLIͷ extract ίϚϯυΛ࣮ߦ

    ͯ͠ʮFrontend͔Βൃߦ͞Ε͍ͯΔΫΤϦͷશͯʯΛ؅ཧ͍ͯ͠Δ (ݱঢ়Ͱ͸GitHub্ͷιʔείʔυѻ͍. Ώ͘Ώ͘͸ม͑Δ͔΋) - ΫΤϦΛServerʹొ࿥ͤͣʹdeployͰ͖ͳ͍࢓૊Έ΋੔උத
  18. Persisted Query - ୨΅ͨతͳԸܙ΋ - ʮFragment ͕౷߹͞ΕͨΫΤϦʯ͕Ұׅ؅ཧ͞Ε͍ͯΔ - ts ΍

    swiftͷίʔυ্ɺΫΤϦ͸ Fragment ͕෼ࢄ؅ཧ͞Ε͍ͯΔ͕ɺ Persisted Query ͷͨΊͷʮநग़͞ΕͨΫΤϦʯΛඥղ͚͹ɺ࣮ࡍʹͲ ͷΑ͏ͳΫΤϦ͕ඈͿͷ͔͙͢ʹ೺ѲͰ͖Δ - Persisted Query Λ૊ΈࠐΉ͔൱͔ͱؔ܎ͳ͘ɺApollo CLI Ͱextract ͠ ͨΫΤϦΛօ͕ݟ͑Δͱ͜ΖͰڞ༗͓ͯ͘͠ͱΑ͍
  19. How GraphQL - ͜͜·Ͱͷ·ͱΊ - Schema: Backend / Frontend ؔ܎ͳ͘

    Devs օͰٞ࿦ͯ͠ҭͯΔ - Query: UI ຤୺͔Β૊Έ্͍͛ͯ͘ͱ͍͏ҙຯͰ Frontend ͷ΋ͷ ҰํͰ ʮPrj ʹͲͷΑ͏ͳQuery͕ଘࡏ͍ͯ͠Δͷ͔ʯΛՄࢹԽ͓ͯ͠ ͘ͱ৭ʑศར - REST API ʹ͸ଘࡏ͠ͳ͍֓೦΋ग़ͯ͘Δ͚ͲɺօͰ΍Ε͹ා͘ͳ͍
  20. Future of GraphQL - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ - defer / stream directive

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

    - Apollo Client v4 - etc ,,, (Federation ͳͲ)
  22. @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
  23. @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 }
  24. Future of GraphQL - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ - defer / stream directive

    - Apollo Client v4 - etc ,,, (Federation ͳͲ)
  25. Apollo Client v4 - લड़ͷ @defer / @stream ʹ͍ͭͯ΋ಉ͜͡ͱ͕ݴ͑Δ͸͕ͣͩɺ fragmentΛҰڃࢢຽʹ͍͔ͯ͠ͳ͍ͱɺGraphQL

    Spec΍React ଆͷਐ Խ(ಛʹSuspense for Data fetching)ʹ଱͑ΒΕͳ͘ͳͬͯ͘Δ͸ͣ - ݱঢ়ͷApollo Clientʹ͸ useFragment ͷΑ͏ͳhook͕ଘࡏ͍ͯ͠ͳ͍ ͕ɺv4Ͱ͸͜Ε͕ੜ·Εͦ͏ - Fragmentͷѻ͍ͱ͍͏ҙຯͰ͸Facebook Relay ͷํ͕खް͘޲͖߹ͬ ͯΔ
  26. Apollo Client v4 - Apollo Client v3.6 Ͱ͸ Breaking Change͸ߦΘΕͳ͍͕ɺv4Ͱ

    useLazyQuery΍ partial fetching ͳͲͷҰ෦͕࡟আ͞ΕΔՄೳੑ͕͋Δ - ͜ΕΒͷػೳʹ͋·Γґଘ͠ͳ͍ํ͕Α͍ - (ͱ͸ݴ͑ useLazyQuery ͷ୅ସखஈ͸Ṗʣ