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.1k
フロントエンドテストの育て方
quramy
12
3.5k
App Router 悲喜交々
quramy
8
640
上手に付き合うコンポーネントテスト
quramy
6
2.2k
Patched fetch did not work
quramy
6
710
GraphQL あるいは React における自律的なデータ取得について
quramy
18
5.4k
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
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
rage against annotate_predecessor
junk0612
0
170
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
1.8k
print("Hello, World")
eddie
2
530
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
110
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
520
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
140
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
240
Reading Rails 1.0 Source Code
okuramasafumi
0
240
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
はじめてのMaterial3 Expressive
ym223
2
860
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Code Review Best Practice
trishagee
70
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
BBQ
matthewcrist
89
9.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
GitHub's CSS Performance
jonrohan
1032
460k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
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.