Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic and GraphQL
Search
Yosuke Kurami
August 05, 2017
Programming
0
960
Ionic and GraphQL
How to integrate GraphQL API into your Ionic app.
Yosuke Kurami
August 05, 2017
Tweet
Share
More Decks by Yosuke Kurami
See All by Yosuke Kurami
Next.js App Router
quramy
14
2.5k
Fragment Composition of GraphQL
quramy
14
1.9k
reg-viz VRT tools
quramy
4
950
NoInfer
quramy
0
120
Precondition with schema directives
quramy
0
1.1k
T3 Stack and TypeScript ecosystem
quramy
4
1.8k
apollo client / react / esm
quramy
1
220
Apollo Client useFragment
quramy
1
770
About Type Syntax Proposal
quramy
1
1.9k
Other Decks in Programming
See All in Programming
[KR] What an Android Developer Does
skydoves
0
160
You may not need XXX in Node.js
masashi
3
530
エンジニア向け 株式会社バックテック 会社紹介資料 / for Engineers
backtech
1
170
LangGraphを用いたマルチエージェント
yuto2000
2
710
ABEMA 画像配信基盤における Cloudflare Workers の活用
peaceiris
2
130
Goでのチーム開発に途中参画した私が納得して実装を進めるためにやったこと ~ 命名編 ~
kaorumuta
0
140
Google Analytics でサイト速度を計測する / Measure site speed with Google Analytics
forrep
2
110
record4s --- Extensible Records for Scala 3, and Domain Modeling with Structural Types
tarao
2
9.3k
Modular Monolith + Go @ newmo
110y
0
320
Exploring the OpenTelemetry Client Library for Go
akarin
0
240
Swift Attributes
hokuron
0
220
ゆるっと話すSLI/SLOを設定してよかったこと出来ていないこと
maaaato
2
580
Featured
See All Featured
Done Done
chrislema
178
15k
We Have a Design System, Now What?
morganepeng
44
6.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
139
42k
Producing Creativity
orderedlist
PRO
338
39k
Unsuck your backbone
ammeep
664
57k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
RailsConf 2023
tenderlove
11
620
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
27
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
15
8.5k
Building Adaptive Systems
keathley
33
1.9k
Six Lessons from altMBA
skipperchong
22
3.1k
Transcript
Ionic and GraphQL 2017.08.06 by Yosuke Kurami
Today’s theme
*POJDυॳ৺ऀͷԶ͕Ͳ͏ʹ͔ *POJD (SBQI2-BQQ࡞ͬͯΈͨ
EJTDMBJNFS ΄΅(SBQI2-ͷ͔͠͠·ͤΜ
Agenda • Demonstration • Introduction to GraphQL • How to
integrate GraphQL into Ionic
Demonstration
App is here: https://quramy.github.io/ionic-gql- messenger/index.html or Ionic view APP ID:
59554521
None
Do you know GraphQL ?
What’s GraphQL w 'BDFCPPL͕ఏএ͍ͯ͠Δ2VFSZ-BOHVBHF w ʹެ։ɻҰԠ3'$ͷҊ͋Δ w ࢀর࣮+BWB4DSJQUଞݴޠϥΠϒϥϦ࣮ଟ͍ w (JU)VC͕ඪ४
WFSTJPO "1*ͱͯ͠࠾༻ ݄ʙ w ҰํͰɺΠϚΠνྲྀߦͬͯͳ͍ٙʜ
Features of GraphQL ୯ҰΤϯυϙΠϯτ %FNBOE%SJWFO"SDIJUFDUVSF #VJMUJOͳܕͱεΩʔϚػߏ
1. Single Endpoint w ྫ(JU)VCW"1* w IUUQTBQJHJUIVCDPNHSBQIRMͷΈ w )551ϝιου1045 w
CPEZ BQQMJDBUJPOKTPO ͷqueryͰΫΤϦΛදݱ
1. Single Endpoint (SBQI2-RVFSZFYBNQMF query RepoSummary { repository(name: "ionic", owner:
"ionic-team") { createdAt, issues(states: OPEN) { totalCount } stargazers { totalCount } watchers { totalCount } } } https://developer.github.com/v4/explorer/
1. Single Endpoint w &OEQPJOU͕ఏڙ͢Δ"1*ύλʔϯछྨ w 2VFSZ͍ΘΏΔ(&5૬҆શ͔ͭႈͳૢ࡞Λެ։ w .VUBUJPO͍ΘΏΔ10451"5$)165%&-&5&૬ ഁյతมߋΛͱͳ͏ૢ࡞Λެ։͢Δ
w 4VCTDSJQUJPO͍ΘΏΔ1VC4VCʹ͓͚Δߪಡʹ૬ ࣮ʹ4FSWFS4JEF1VTI͕ඞཁͱͳΔ ݱঢ়XTͰUSBOTQPSU͢Δ͜ͱ͕ଟ͍
2. Demand Driven Architecture w ʮཉ͍͠ใΛཉ͍͚ͩ͠ʯཁٻͰ͖ΔΈͷ͜ͱ w ઌͷ(JU)VCͷྫͰ͋Εɺ(SBQI2-ͰҰʹ 3FQPTJUPSZͱͦͷJTTVFͷৄࡉΛऔಘ͢Δ͜ͱͰ͖Δ w
ରͯ͠3&4540"1ͷΑ͏ʹ3FTQPOTFͷܕ͕ݻఆ͞ΕΔ ܗࣜͷ4VQQMZ%SJWFO"SDIJUFDUVSFͱݺͿ w 42-41"32-+40/(SBQI 'BMDPS FUD https://qconnewyork.com/ny2015/system/files/presentation-slides/ qcon_dda_2015_iwork09_boguta_nolen.pdf
Mobile and DDA w ʮը໘ʹඞཁͳใΛඞཁͳλΠϛϯάͰཁٻͰ͖Δʯ ͱ͍͏͜ͱɺϦΫΤετճଳҬཁٻ͕γϏΞͳαʔ ϏεͰద༻ͯͦ͜͠༏Ґੑ͕ൃشͰ͖Δ w ଓڥ͕ܙ·Ε͍ͯΔ1$ΞϓϦΑΓɺ(ͰઓΘͶ ͳΒͳ͍Α͏ͳϞόΠϧΞϓϦʹͦ͜ɺ(SBQI2-͍ͯ
͍ΔͷͰɻ
3. Schema System w (SBQI2-ͷΤϯυϙΠϯτެ։͢ΔσʔλεΩʔϚΛఆٛ ͢Δඞཁ͕͋Δ w (SBQI2-༷ࣗମʹܕػߏ͕Έࠐ·Ε͍ͯΔͨΊɺ ίʔυੜ3PVUJOHϥΠϒϥϦ͕ߏங͍͢͠ type
Repository implements Node { id: ID! number: Number! createdAt: DateTime! issues: [Issue] : }
3. Schema System
Caveat w όοΫΤϯυͷ࣮ߟྀ͕ࢁͷΑ͏ʹ͋Δ / ηΩϡϦςΟ FUD w ϑΟʔϧυΛͭͭࢦఆ͢Δɺϑϩϯτͷ࣮ෛՙߴ
͘ͳΓ͔Ͷͳ͍ 3&45ͰΤϯυϙΠϯτΛࢦఆ͢Δ͚ͩ ͰࡁΜͰ͍ͨ w 3&45Ͱഓͬͨϊϋπʔϧ͕׆͔ͤͳ͍ ΤϥʔεςʔλεΛͲ͏ઃܭ͢Δ͔ʁ
Pros / Cons w 1SPT w "1*ʹੑೳͱϦιʔεઃܭͷ྆໘Λ୲อͰ͖Δ w ϚϧνΫϥΠΞϯτ 1$XFC.PCJMF
ରԠ͍͢͠ w ܕεΩʔϚʹΑΓɺपลπʔϧΛ࡞Γ͍͢ w $POT w όοΫΤϯυϑϩϯτΤϯυͱʹ࣮ෛՙߴΊ
How to integrate GraphQL into Ionic Apps
Client Libraries w 'BDFCPPL3FMBZ w 3FMBZ2-ɺಠ੍͕ࣗڧ͍ ΄΅ϑϨʔϜϫʔΫ w 3FBDU3FBDUOBUJWF
#BCFMͱͷ૬ੑྑ͍ w "QPMMP w ରԠݴޠ'84XJGU+BWB3FBDU"OHVMBS w ػೳബΊɻͷ$MJFOUϥΠϒϥϦ
Backend as a Service w αΫοͱϞόΠϧ։ൃΛ͍ͨ͠߹ͷબࢶ w ͪͳΈʹ"OHVMBSք۾Ͱ'JSFCBTF͕ڧ͍ w 'JSFCBTF'VODUJPOTͰ(SBQI2-TFSWFͨ͠ྫ
w ୯ҰΤϯυϙΠϯτͷɺϦιʔεϚοϐϯάָ͕ͳͷͰɺ 4FSWFSMFTT"SDIJUFDUVSF (SBQI2-݁ߏ؆୯
GraphQL BaaS w 3FJOEFY IUUQTBDDPVOUTSFJOEFYJP (SBQI2-#BB4͚తଘࡏɻ࠷ۙͷ׆ಈ΄΅θϩʜ w HSBQIDPPM IUUQTDPOTPMFHSBQIDPPM
"84্ʹߏங͞Εͨ#BB4 5PLZP3FHJPO BQOPSUIFBTU બՄೳ w TDBQIPME IUUQTTDBQIPMEJPBQQT ൺֱత࠷ۙʹϩʔϯν͞Εͨ#BB4"84͔Ͳ͏͔ෆ໌ͩ ͚Ͳɺݱঢ়બՄೳSFHJPOVTXFTUPSFVSPQFͷΈ
None
It’s time to dev!
Type Propagation w HSBQIDPPM 4DIFNBΛ+40/ܗࣜͰΤΫεϙʔτ w UTHSBQIRMQMVHJO ࣗ࡞ 54-BOHVBHF4FSWJDFͰ4DIFNBKTPOΛಡΈ͜Ή
ίʔυதͰΫΤϦͷิ͕༗ޮʹ w BQPMMPDPEFHFO 5BHHFE5FNQMBUF-JUFSBMͷΫΤϦΛύʔε͠ɺ 54ͷUZQFBOOPUBUJPOΛੜ
Type Propagation w BQPMMPBOHVMBS ੜ͞ΕͨUZQFΛDMJFOUʹ৯ΘͤΔ͜ͱͰɺ3YKT4USFBN ΛಘΔ w !BOHVMBSDPSF BTZODQJQFʹΑΓTUSFBN͔ΒΫΤϦ݁ՌΛऔΓग़͢ w
!BOHVMBSMBOHVBHFTFSWJDF ΫΤϦ݁Ռ (SBQI2-GSBHNFOU ͷUZQFBOOPUBUJPOΛར ༻ͯ͠ɺ"OHVMBSUFNQMBUFதͰϓϩύςΟิ
.ts or .graphql ? w BQPMMPDPEFHFOHSBQIRMϑΝΠϧʹهड़͞ΕͨRVFSZ NVUBUJPO͔ΒUZQFBOOPUBUJPOΛੜ͢Δ͜ͱՄೳ w ͜ͷ߹ HSBQIRMUBHMPBEFSͱ͍͏XFCQBDLMPBEFSΛ
͏ඞཁ͕ੜ͡ΔͨΊɺJPOJDBQQTDSJQUTDPOpH XFCQBDLDPOpHKTʹه͠·͠ΐ͏
GraphQL Result as Observable w BQPMMPBOHVMBSͷRVFSZNVUBUJPOTVCTDSJQUJPO࣮ߦ݁ Ռɺશͯ0CTFSWBCMFΛฦ٫ const users$ =
this.apollo.query<UsersQuery>({ query: users }) .map(({ data }) => data.allUsers) ; // typeof users$: Observable<UserFragment[]>
GraphQL Result as Observable ύζϧ2VFSZ.VUBUJPO4VCTDSJQUJPO͔Βɺ this.timeline$: Observable<Message[]>Λ࡞ͬͯΈΑ͏ const latestMessages$: Observable<Message[]>
= this.apollo.query({ query }); const myMessage$: Observable<Message> = this.apollo.mutate({ mutation }); const addedMessage$: Observable<Message> = this.apollo.subscribe({ subscription }); ճͪ͜Β: https://github.com/Quramy/ionic-gql-messenger/blob/master/src/pages/timeline/ timeline.ts#L68-L82
Summary
Summary w (SBQI2-ʹͭΒΈ͋ΔҰํɺϞόΠϧͱͷΈ߹Θͤ ʹເΛײ͡Δ w ࠷ۙͰ༷ʑͳ#BB4ొ͠ɺॳظίετԼ͕͖ͬͯͯ ͍Δ w "QPMMPͱपลϥΠϒϥϦͷ׆༻Ͱɺշద։ൃڥ͕खʹೖ Δ
Resources 1/2 w %FNP"QQ3FQP IUUQTHJUIVCDPN2VSBNZJPOJDHRMNFTTFOHFS w *POJDBOE(SBQI2-HVJEF3FQP IUUQTHJUIVCDPN2VSBNZJPOJDBQPMMPTJNQMFBQQ w (SBQI2-5ZQF4DSJQU-BOHVBHF4FSWJDFQMVHJO
IUUQTHJUIVCDPN2VSBNZUTHSBQIRMQMVHJO
Resources 2/2 w (SBQI2-5ZQF4DSJQU"OOPUBUJPO(FOFSBUPS IUUQTHJUIVCDPNBQPMMPHSBQIRMBQPMMPDPEFHFO w "OHVMBS"QPMMP$MJFOU IUUQEFWBQPMMPEBUBDPNBOHVMBS w HSBQIDPPM
(SBQI2-#BB4 IUUQTDPOTPMFHSBQIDPPM
About me
IAM
એͦͷ w OHTBLFͱ͍͏"OHVMBSNFFUVQΛෆఆظ։࠵͍ͯ͠·͢ w ୈճ Ր w $POOQBTTͰlOHTBLFzͰݕࡧͩʂ
એͦͷ w (SBQI2-5PLZPͱ͍͏.FFUVQΛ্ཱ͍ͪ͛ͯ·͢ w NFFUVQDPNͰl(SBQI2-5PLZPzͬͯݕࡧͯ͠Ͷʂ
Thank you.