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
1.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
TypeScript LSP の今までとこれから
quramy
1
600
フロントエンドテストの育て方
quramy
12
3.4k
App Router 悲喜交々
quramy
8
620
上手に付き合うコンポーネントテスト
quramy
6
2.1k
Patched fetch did not work
quramy
6
690
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.3k
Next.js App Router
quramy
15
3.6k
Fragment Composition of GraphQL
quramy
16
4k
reg-viz VRT tools
quramy
4
1.4k
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
510
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
180
型で語るカタ
irof
0
530
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
330
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
190
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
210
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
160
20250708_JAWS_opscdk
takuyay0ne
2
120
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for Performance
lara
610
69k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How GitHub (no longer) Works
holman
314
140k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
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.