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

GraphQLとの向き合い方2022年版

 GraphQLとの向き合い方2022年版

893f54413c2bd9ba41d11d753aacaf2c?s=128

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

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

  3. About me - Twitter / GitHub: @Quramy - ϦΫϧʔτͰWebϑϩϯτΤϯδχΞ΍ͬͯ·͢ (ࠓ͸ແ৬͡Όͳ͍Αʂ)

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

    ઌ೔ʢͱ͍͏͔ࡢ೔ʣແࣄϦϦʔε͞Ε·ͨ͠ɻ΍ͬͨͶʂ - ͜ͷ Prj ʹͯ GraphQLΛ࢖͏্ͰɺͲͷΑ͏ͳ͜ͱΛߟ͑ͨͷ͔ɾͲΜ ͳؾ͖͕͔ͮ͋ͬͨɺΛத৺ʹ࿩͍͖ͯ͠·͢
  5. Agenda 1. Why GraphQL 2. How GraphQL 3. Future of

    GraphQL
  6. 1. Why GraphQL

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

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

  9. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ - աڈʹผPrjͰൃੜ͍ͯͨ͠՝୊: - RESTish API / FrontendΛ୯ಠͷ։ൃऀͰ։ൃͰ͖ͯ͠·͏৔߹ɺ UndocumentedͳAPI͕ੜ·Εͯ͠·͍͕ͪ -

    e.g. Responseͷxxxͱ͍͏ΦϒδΣΫτ͸nullableͳͷ͔ෆ໌ - ͜ͷAPIΛར༻͢ΔFrontend։ൃऀͷෛ୲ʹ… (Web Frontend༻ʹ࡞ΒΕͨAPIΛNative App͔Β࠶ར༻͢Δࡍʹݦࡏ Խ)
  10. Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ - GraphQLͷ৔߹ʮSchemaΛఆٛ͠ͳ͍ͱFrontend͸։ൃͰ͖ͳ͍ʯͱ ͍͏੍໿͕͋Δ - ※ RESTish APIͰ΋ɺOpen APIͳͲͷπʔϧνΣΠϯΛ͔ͬ͠Γར༻͢ Ε͹Documentation

    ͢Δ͜ͱ͸ՄೳͰ͋Δ͕ɺ๞͘·Ͱ opt-in
  11. Why GraphQL - GraphQLͷಛ௃: - Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ - Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ

  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Λ࠾༻͢Δʯʹ͸ɺ͜ͷੑ࣭ͷҧ͍Λࠎͷ਷·Ͱୟ͖ࠐΜͰ ͓͘΂͖
  13. ClientʹΫΤϦͷܾఆݖ͕͋Δ - Demand Driven Architectureͱ͸ - ʮϨεϙϯεͷܗΛClient͕ܾఆͰ͖ΔʯλΠϓͷ௨৴ํ๏ - e.g. GraphQL,

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

    API ΛNative App͔Β࠶ར༻͢ΔΞϓϩʔνΛ࠾͍ͬͯͨ - ͜ͷPrjͰͷAPI͸Web FrontendʹಛԽ࣮ͨ͠૷͕ͳ͞Ε͍ͯͨͨΊɺ ඞͣ͠΋Native App͔Β࢖͍΍͍͢Θ͚Ͱ͸ͳ͔ͬͨ (Smart UI patternͷฐ֐)
  15. ClientʹΫΤϦͷܾఆݖ͕͋Δ - GraphQLͷ৔߹ɺ(SchemaʹఆΊΒΕ͍ͯΔൣғʹ͓͍ͯ͸) Ϩεϙ ϯεͷܗࣜ͸Frontendଆ͕ࣗ༝ʹܾΊΔ͜ͱ͕Ͱ͖Δ - ࣮ࡍɺݱPrjͰ͸Web Frontend ͕Native AppΑΓ΋ޙ͔ΒࢀՃ͕ͨ͠

    ʮWeb Frontend ʹͱͬͯඞཁे෼ͳΫΤϦʯΛطଘͷSchema͔Βى͜ ͚ͩ͢ͰࡁΜͩ
  16. (ࢀߟ) Backend For Frontend - ෳ਺छྨ Frontend ͕ଘࡏ͢Δ৔߹ɺͦΕͧΕͷ Client छผʹରͯ͠

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

    Frontend Λ RESTish API Ͱ։ൃͯ͠ ্͍͘Ͱͷ՝୊͕͋ͬͨ - Undocumented, (Supply Driven͕Ώ͑ͷ) Smart UI - GraphQL ͷ Schema / Demand Driven ͕͜ΕΒͷղফʹ໾ཱͭΛ͜ ͱظ଴ͯ͠࠾༻
  18. 2. How GraphQL

  19. How GraphQL - Schema Driven Development - Paradigm Shift -

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

    Tools / Developer Experience
  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
  22. J04EFWT #BDLFOEEFWT 8FC'&EFWT

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

  24. Schema Driven Development ࣮૷ʹ͕͔͔࣌ؒΓͦ͏ͳ Schema มߋͷ৔߹ɺ࣍ͷϑϩʔͰ։ൃΛ͢͢ ΊΔ͜ͱ΋ 1. SDL ΛօͰٞ࿦ͯ͠ఆΊΔ

    2. ઌʹ Mock Λॻ͘ (apollo-server ͷ Mock Resolver Λར༻) 3. Frontend: Mock Λར༻͠ͳ͕Β UI Λ࣮૷ 4. Backend: SDL / MockΛோΊͳ͕Β࣮ Resolver Λ࣮૷
  25. How GraphQL - Schema Driven Development - Paradigm Shift -

    Tools / Developer Experience
  26. Paradigm Shift - GraphQL ͷʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯͷಛੑ্ɺRESTish API Λར༻ͨ͠։ൃͱ͸ߟ͑ํΛม͑Δඞཁ͕͋ΔՕॴ͕͋Δ - Ұํ

    Prj ࢀըऀશһ͕࠷ॳ͔Β GraphQL ʹ໌Δ͍ͱ͸ݶΒͳ͍ - Prj ൃ଍࣌ʹ PoC Sprint Λ࣮ࢪ (Backend / Native devs) Web Frontend νʔϜ͸ൃ଍λΠϛϯά͕ҟͳ͍ͬͯͨͨΊɺผ్ษ ڧձͰΧόʔ
  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 ͳͲͷ֓೦΋Χόʔ
  28. None
  29. Fragment ͱ Query Composition - ։ൃνʔϜશମͰ GraphQL ʹ޲͖߹͏ࡍʹ Fragment Colocation

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

    ͷߟ ͑ํʹࢍಉͯ͠΋Β͏Α͏ʹ஫ྗ. - ʮUI ࣮૷ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ - Component Oriented Design (e.g. Atomic Design) - Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ 'SBHNFOU$PMPDBUJPOͰ͜ΕΒ͕਌࿨͢Δ
  31. https://quramy.medium.com/render-as-you-fetch-incremental-graphql-fragments-70e643edd61e

  32. How GraphQL - Schema Driven Development - Paradigm Shift -

    Tools / Developer Experience
  33. GraphQL ͱ Toolୡ - graphql-code-generator - GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ੒ -

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

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

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

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

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

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

  40. Future of GraphQL - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ - defer / stream directive

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

    - Apollo Client v4 - etc ,,, (Federation ͳͲ)
  42. @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
  43. @defer / @stream - ྫ: ҎԼͷΑ͏ͳΫΤϦ͕͋ͬͨͱͯ͠ɺ specialPrice field ͷܭࢉίετ͕େ͖͔ͬͨͱ͢Δ

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

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

  46. @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 }
  47. Future of GraphQL - ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ - defer / stream directive

    - Apollo Client v4 - etc ,,, (Federation ͳͲ)
  48. Apollo Client v4 - https://github.com/apollographql/apollo-client/issues/8245 -

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

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

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

  52. ͓ΘΓʹ - GraphQL Tokyo ͱ͍͏meetup Λఆظతʹ։࠵͍ͯ͠·͢ - https://www.meetup.com/ja-JP/GraphQL-Tokyo/ - ࣍ճ͸

    2022.02.24. ྑ͚Ε͹དྷ͍ͯͩ͘͞!
  53. Thank you!