GraphQLとの向き合い方2022年版

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. J04
    EFWT #BDLFOE
    EFWT 8FC
    '&
    EFWT
23. J04
    EFWT #BDLFOE
    EFWT 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 ͳͲͷ֓೦΋Χόʔ
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!