GraphQLͱͷ͖߹͍ํ2022 ൛@Quramy 2022.02.22#fec_fukuoka
View Slide
ͱ#fec_fukuoka- 2019ʹ։࠵͞Εͨࡍʹొஃͤͯ͞Β͍·ͨ͠- https://speakerdeck.com/quramy/vrt-in-action
About me- Twitter / GitHub: @Quramy- ϦΫϧʔτͰWebϑϩϯτΤϯδχΞͬͯ·͢(ࠓແ৬͡Όͳ͍Αʂ)- 20217݄ࠒ͔ΒελσΟαϓϦͷࣄΛ͢ΔΑ͏ʹͳΓ·ͨ͠
ࠓ͢͜ͱ- 20217݄ࠒΑΓʰελσΟαϓϦ தֶߨ࠲ʱϕʔγοΫίʔε ϦχϡΞʔϧ Prjͱ͍͏ GraphQLΛ࠾༻ͨ͠PrjʹδϣΠϯ- ઌʢͱ͍͏͔ࡢʣແࣄϦϦʔε͞Ε·ͨ͠ɻͬͨͶʂ- ͜ͷ Prj ʹͯ GraphQLΛ͏্ͰɺͲͷΑ͏ͳ͜ͱΛߟ͑ͨͷ͔ɾͲΜͳؾ͖͕͔ͮ͋ͬͨɺΛத৺ʹ͍͖ͯ͠·͢
Agenda1. Why GraphQL2. How GraphQL3. Future of GraphQL
1. Why GraphQL
Why GraphQL- GraphQLͷಛ:- Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ- Client͕ΫΤϦͷܾఆݖΛѲ͍ͬͯΔ͜ͱ
Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ- աڈʹผPrjͰൃੜ͍ͯͨ͠՝:- RESTish API / FrontendΛ୯ಠͷ։ൃऀͰ։ൃͰ͖ͯ͠·͏߹ɺUndocumentedͳAPI͕ੜ·Εͯ͠·͍͕ͪ- e.g. Responseͷxxxͱ͍͏ΦϒδΣΫτnullableͳͷ͔ෆ໌- ͜ͷAPIΛར༻͢ΔFrontend։ൃऀͷෛ୲ʹ…(Web Frontend༻ʹ࡞ΒΕͨAPIΛNative App͔Β࠶ར༻͢ΔࡍʹݦࡏԽ)
Schemaఆ͕ٛඞਢͰ͋Δ͜ͱ- GraphQLͷ߹ʮSchemaΛఆٛ͠ͳ͍ͱFrontend։ൃͰ͖ͳ͍ʯͱ͍͏੍͕͋Δ- ※ RESTish APIͰɺOpen APIͳͲͷπʔϧνΣΠϯΛ͔ͬ͠Γར༻͢ΕDocumentation ͢Δ͜ͱՄೳͰ͋Δ͕ɺ͘·Ͱ opt-in
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Λ࠾༻͢Δʯʹɺ͜ͷੑ࣭ͷҧ͍Λࠎͷ·Ͱୟ͖ࠐΜͰ͓͖͘
ClientʹΫΤϦͷܾఆݖ͕͋Δ- Demand Driven Architectureͱ- ʮϨεϙϯεͷܗΛClient͕ܾఆͰ͖ΔʯλΠϓͷ௨৴ํ๏- e.g. GraphQL, SQL, SPARQL, etc…- Supply Driven Architectureͱ- ʮϨεϙϯεͷܗ͕ࣜServerͰܾఆ͞ΕΔʯλΠϓ- e.g. REST, SOAP, etc…
ClientʹΫΤϦͷܾఆݖ͕͋Δ- ʮClientʹΫΤϦͷܾఆݖ͕͋Δʯ͕ޮ͍ͯ͘Δྫͱͯ͠ɺෳͷFrontend ͕ڍ͛ΒΕΔ- աڈͷผPrjͰɺWeb Frontend ͚ʹ࣮ɾެ։ͨ͠ RESTish APIΛNative App͔Β࠶ར༻͢ΔΞϓϩʔνΛ࠾͍ͬͯͨ- ͜ͷPrjͰͷAPIWeb FrontendʹಛԽ࣮͕ͨ͠ͳ͞Ε͍ͯͨͨΊɺඞͣ͠Native App͔Β͍͍͢Θ͚Ͱͳ͔ͬͨ(Smart UI patternͷฐ)
ClientʹΫΤϦͷܾఆݖ͕͋Δ- GraphQLͷ߹ɺ(SchemaʹఆΊΒΕ͍ͯΔൣғʹ͓͍ͯ) ϨεϙϯεͷܗࣜFrontendଆ͕ࣗ༝ʹܾΊΔ͜ͱ͕Ͱ͖Δ- ࣮ࡍɺݱPrjͰWeb Frontend ͕Native AppΑΓޙ͔ΒࢀՃ͕ͨ͠ʮWeb Frontend ʹͱͬͯඞཁेͳΫΤϦʯΛطଘͷSchema͔Βى͚ͩ͜͢ͰࡁΜͩ
(ࢀߟ) Backend For Frontend- ෳछྨ Frontend ͕ଘࡏ͢Δ߹ɺͦΕͧΕͷ Client छผʹରͯ͠BFF Λ࣮͢ΕɺݸʑͷBFF͕Smart UIʹͳͬͨͱ͜ΖͰͳ͍- ͨͩ͠ Backend ͱผʹ͞Βʹதؒͷ Server Λ༻ҙ͢Δ͜ͱʹͳΔͨΊɺ։ൃ্ͷτϨʔυΦϑ͕ൃੜ͢Δ·ͨɺNative App͚ͷBFFΛʮ୭͕ʯʮͲͷΑ͏ʹʯ։ൃ͢Δͷ͔ɺ͕ʹͳΓ͍͢ҹ
Why GraphQL- ͜͜·Ͱͷ·ͱΊ- աڈ Prj ʹ͓͍ͯɺWeb / Native Frontend Λ RESTish API Ͱ։ൃ্͍ͯ͘͠Ͱͷ՝͕͋ͬͨ- Undocumented, (Supply Driven͕Ώ͑ͷ) Smart UI- GraphQL ͷ Schema / Demand Driven ͕͜ΕΒͷղফʹཱͭΛ͜ͱظͯ͠࠾༻
2. How GraphQL
How GraphQL- Schema Driven Development- Paradigm Shift- Tools / Developer Experience
Schema Driven Development- GraphQL Schema IDL(Interface Definition Language) ʹ૬- Schema Λ࣮͢Δଆ (Backend Devs) / ར༻ଆ (Frontend Devs) Ͱܾٞͯ͠ఆ͢Δ4DIFNBJ04EFWT"OESPJEEFWT8FC'&EFWT#BDLFOEEFWTImplement resolversQuery / Mutation
J04EFWT#BDLFOEEFWT8FC'&EFWT
J04EFWT#BDLFOEEFWT8FC'&EFWT4DIFNB։ൃऀશһͰҭͯΔͷʂ
Schema Driven Development࣮ʹ͕͔͔࣌ؒΓͦ͏ͳ Schema มߋͷ߹ɺ࣍ͷϑϩʔͰ։ൃΛ͢͢ΊΔ͜ͱ1. SDL ΛօͰٞͯ͠ఆΊΔ2. ઌʹ Mock Λॻ͘ (apollo-server ͷ Mock Resolver Λར༻)3. Frontend: Mock Λར༻͠ͳ͕Β UI Λ࣮4. Backend: SDL / MockΛோΊͳ͕Β࣮ Resolver Λ࣮
Paradigm Shift- GraphQL ͷʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯͷಛੑ্ɺRESTish APIΛར༻ͨ͠։ൃͱߟ͑ํΛม͑Δඞཁ͕͋ΔՕॴ͕͋Δ- Ұํ Prj ࢀըऀશһ͕࠷ॳ͔Β GraphQL ʹ໌Δ͍ͱݶΒͳ͍- Prj ൃ࣌ʹ PoC Sprint Λ࣮ࢪ (Backend / Native devs)Web Frontend νʔϜൃλΠϛϯά͕ҟͳ͍ͬͯͨͨΊɺผ్ษڧձͰΧόʔ
GraphQL Workshop- Web Frontend devs ͚ͷ GraphQL Workshop ࢿྉҎԼͷURLͰެ։ͯ͠·͢- https://github.com/Quramy/gql-study-workshop- React.js / Apollo Client Λ͍ɺͪΐͬͱͨ͠ΞϓϦέʔγϣϯΛ։ൃ͢ΔྲྀΕΛ1͔ΒֶΔΑ͏ʹઃܭ- Normalized CacheFragment Colocation ͳͲͷ֓೦Χόʔ
Fragment ͱ Query Composition- ։ൃνʔϜશମͰ GraphQL ʹ͖߹͏ࡍʹ Fragment Colocation ͷߟ͑ํʹࢍಉͯ͠Β͏Α͏ʹྗ.- ʮUI ࣮ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ- Component Oriented Design (e.g. Atomic Design)- Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ
Fragment ͱ Query Composition- ։ൃνʔϜશମͰ GraphQL ʹ͖߹͏ࡍʹ Fragment Colocation ͷߟ͑ํʹࢍಉͯ͠Β͏Α͏ʹྗ.- ʮUI ࣮ͱ API ௨৴ΛͲ͏౷߹͢Δ͔ʯΛݕ౼͢Δ্ͰॏཁͱͳΔͨΊ- Component Oriented Design (e.g. Atomic Design)- Demand Driven Architecture ʮClient ʹΫΤϦͷܾఆݖ͕͋Δʯ'SBHNFOU$PMPDBUJPOͰ͜ΕΒ͕͢Δ
https://quramy.medium.com/render-as-you-fetch-incremental-graphql-fragments-70e643edd61e
GraphQL ͱ Toolୡ- graphql-code-generator- GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ- SDL͔Β resolverͷܕΛੜ- ts-graphql-plugin (ࣗ࡞)- tsxϑΝΠϧͰͷGraphQL ΫΤϦͷิʹར༻- Apollo CLI- GraphQL ΫΤϦ͔Β persisted queryͷநग़
GraphQL ͱ Toolୡ- graphql-code-generator- GraphQL ΫΤϦ͔Β apollo-clientͷhookΛੜ- SDL͔Β resolverͷܕΛੜ- ts-graphql-plugin (ࣗ࡞)- tsxϑΝΠϧͰͷGraphQL ΫΤϦͷิʹར༻- Apollo CLI- GraphQL ΫΤϦ͔Β persisted queryͷநग़ׂͱఆ൪ײ͋ΔͷͰࠓׂѪ
Persisted Query- Persisted Query is Կ:- GraphQLΫΤϦͷຊจͱରͱͳΔϋογϡΛServerʹڭ͑ࠐΜͰ͓͖ɺ ΫΤϦຊจΛPOST͢ΔΘΓʹ ֘ͷϋογϡΛURLʹ༩ͯ͠ GET ͢Δٕज़https://qiita.com/Quramy/items/b3943a0c27f3ade2c57d- Persisted Query Λಋೖ͢Δ͜ͱͰ- ServerଆͰͷQuery parsingͷίετݮ- ະొͷQueryΛ͘Α͏ʹ͢ΕɺServerΛѱҙͷ͋ΔΫΤϦ͔ΒޚͰ͖Δ
Persisted Query- ServerΛѱҙ͋ΔΫΤϦ͔Βޚ͢ΔͨΊɺొࡁΈͷΫΤϦͷΈڐՄ- ͜ΕΛ࣮ݱ͢ΔͨΊɺݱPrjͰ Apollo CLIͷ extract ίϚϯυΛ࣮ߦͯ͠ʮFrontend͔Βൃߦ͞Ε͍ͯΔΫΤϦͷશͯʯΛཧ͍ͯ͠Δ(ݱঢ়ͰGitHub্ͷιʔείʔυѻ͍. Ώ͘Ώ͘ม͑Δ͔)- ΫΤϦΛServerʹొͤͣʹdeployͰ͖ͳ͍Έඋத
Persisted Query- ୨΅ͨతͳԸܙ- ʮFragment ͕౷߹͞ΕͨΫΤϦʯ͕Ұׅཧ͞Ε͍ͯΔ- ts swiftͷίʔυ্ɺΫΤϦ Fragment ͕ࢄཧ͞Ε͍ͯΔ͕ɺPersisted Query ͷͨΊͷʮநग़͞ΕͨΫΤϦʯΛඥղ͚ɺ࣮ࡍʹͲͷΑ͏ͳΫΤϦ͕ඈͿͷ͔͙͢ʹѲͰ͖Δ- Persisted Query ΛΈࠐΉ͔൱͔ͱؔͳ͘ɺApollo CLI Ͱextract ͨ͠ΫΤϦΛօ͕ݟ͑Δͱ͜ΖͰڞ༗͓ͯ͘͠ͱΑ͍
How GraphQL- ͜͜·Ͱͷ·ͱΊ- Schema: Backend / Frontend ؔͳ͘ Devs օͰٞͯ͠ҭͯΔ- Query: UI ͔ΒΈ্͍͛ͯ͘ͱ͍͏ҙຯͰ Frontend ͷͷҰํͰ ʮPrj ʹͲͷΑ͏ͳQuery͕ଘࡏ͍ͯ͠Δͷ͔ʯΛՄࢹԽ͓ͯ͘͠ͱ৭ʑศར- REST API ʹଘࡏ͠ͳ͍֓೦ग़ͯ͘Δ͚ͲɺօͰΕා͘ͳ͍
3. Future of GraphQL
Future of GraphQL- ࠷ۙؾʹͳ͍ͬͯΔ͜ͱ- defer / stream directive- Apollo Client v4- etc ,,, (Federation ͳͲ)
@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
@defer / @stream- ྫ: ҎԼͷΑ͏ͳΫΤϦ͕͋ͬͨͱͯ͠ɺspecialPrice field ͷܭࢉίετ͕େ͖͔ͬͨͱ͢Δ
@defer / @stream- Query͕શͯղܾ͞ΕΔ·ͰClientඳըΛ։࢝Ͱ͖ͳ͍
@defer / @stream- ͬͱࡉ͔͘ඳըΛίϯτϩʔϧ͍ͨ͠-> ͜ΕΛ࣮ݱ͢ΔͨΊͷσΟϨΫςΟϒ
@defer / @stream- 1 Operation : ෳ ResponseͱͳΔ- Fragment ʹ༩- React.js ͷ Suspense for data fetch ͱੑߴ͍(ͣ)- ݱPrjͰར༻Ͱ͖Δͱ͜Ζ͕͋Γͦ͏(ϗʔϜը໘ͳͲɺෳfieldΛ·ͱΊͯऔಘ͍ͯ͠ΔՕॴ)query ProductDetailQuery {product(id: 100) {idnameimageURL...DeferredPrice @defer}}fragment DeferredPrice on Product {specialPrice}
Apollo Client v4- https://github.com/apollographql/apollo-client/issues/8245-
Apollo Client v4- લड़ͷ @defer / @stream ʹ͍ͭͯಉ͜͡ͱ͕ݴ͑Δ͕ͣͩɺfragmentΛҰڃࢢຽʹ͍͔ͯ͠ͳ͍ͱɺGraphQL SpecReact ଆͷਐԽ(ಛʹSuspense for Data fetching)ʹ͑ΒΕͳ͘ͳͬͯ͘Δͣ- ݱঢ়ͷApollo Clientʹ useFragment ͷΑ͏ͳhook͕ଘࡏ͍ͯ͠ͳ͍͕ɺv4Ͱ͜Ε͕ੜ·Εͦ͏- Fragmentͷѻ͍ͱ͍͏ҙຯͰFacebook Relay ͷํ͕खް͖͘߹ͬͯΔ
Apollo Client v4- Apollo Client v3.6 Ͱ Breaking ChangeߦΘΕͳ͍͕ɺv4ͰuseLazyQuery partial fetching ͳͲͷҰ෦͕আ͞ΕΔՄೳੑ͕͋Δ- ͜ΕΒͷػೳʹ͋·Γґଘ͠ͳ͍ํ͕Α͍- (ͱݴ͑ useLazyQuery ͷସखஈṖʣ
͓ΘΓʹ
͓ΘΓʹ- GraphQL Tokyo ͱ͍͏meetup Λఆظతʹ։࠵͍ͯ͠·͢- https://www.meetup.com/ja-JP/GraphQL-Tokyo/- ࣍ճ 2022.02.24. ྑ͚Εདྷ͍ͯͩ͘͞!
Thank you!
quramy
azukiazusa1
philipschwarz
marcustung
tomokusaba
texmeijin
codehex
morikann
ryos36
knr109
ivargrimstad
piyoppi
aridlehoover
thekraken
malarkey
smashingmag
yeseniaperezcruz
jacobian
tammielis
jponch
jnunemaker
rmw
kevinliebholz
marktimemedia
eileencodes