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
1.2k
フロントエンドテストの育て方
quramy
12
3.6k
App Router 悲喜交々
quramy
8
660
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
720
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.5k
Next.js App Router
quramy
15
3.7k
Fragment Composition of GraphQL
quramy
16
4.2k
reg-viz VRT tools
quramy
4
1.5k
Other Decks in Programming
See All in Programming
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
350
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Claude Agent SDK を使ってみよう
hyshu
0
1.3k
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Cursorハンズオン実践!
eltociear
2
1.1k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
290
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
オープンソースソフトウェアへの解像度🔬
utam0k
16
3.1k
All About Angular's New Signal Forms
manfredsteyer
PRO
0
190
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Practical Orchestrator
shlominoach
190
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
GitHub's CSS Performance
jonrohan
1032
470k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.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.