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