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
1k
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
App Router 悲喜交々
quramy
7
540
上手に付き合うコンポーネントテスト
quramy
4
1.9k
Patched fetch did not work
quramy
6
600
GraphQL あるいは React における自律的なデータ取得について
quramy
18
4.9k
Next.js App Router
quramy
15
3.4k
Fragment Composition of GraphQL
quramy
16
3.6k
reg-viz VRT tools
quramy
4
1.3k
NoInfer
quramy
0
250
Precondition with schema directives
quramy
0
1.5k
Other Decks in Programming
See All in Programming
動作確認やテストで漏れがちな観点3選
starfish719
6
1k
Grafana Cloudとソラカメ
devoc
0
170
技術を根付かせる / How to make technology take root
kubode
1
250
Ruby on cygwin 2025-02
fd0
0
150
CI改善もDatadogとともに
taumu
0
120
Software Architecture
hschwentner
6
2.1k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
GAEログのコスト削減
mot_techtalk
0
120
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
250
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4k
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Raft: Consensus for Rubyists
vanstee
137
6.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Automating Front-end Workflow
addyosmani
1368
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Six Lessons from altMBA
skipperchong
27
3.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
What's in a price? How to price your products and services
michaelherold
244
12k
The Cult of Friendly URLs
andyhume
78
6.2k
Faster Mobile Websites
deanohume
306
31k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Invisible Side of Design
smashingmag
299
50k
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.