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
GraphcoolとVue.jsでちょっとしたサービスを作ってみた話
Search
foxtrackjp
February 10, 2018
Technology
0
2.9k
GraphcoolとVue.jsでちょっとしたサービスを作ってみた話
foxtrackjp
February 10, 2018
Tweet
Share
More Decks by foxtrackjp
See All by foxtrackjp
ITエンジニアが産業機器メーカーに転職してみた話
foxtrackjp
0
31
LOWYA ARを支える技術
foxtrackjp
0
190
Amazon_Connectで遊ぼう.pdf
foxtrackjp
0
300
温泉について語る
foxtrackjp
2
400
ARとかMRとかVRの話 ~実物から3Dモデルを生成するよ~
foxtrackjp
0
520
サーバーレス時代のユーザー認証を考える
foxtrackjp
13
5.1k
サーバレスアーキテクチャ
foxtrackjp
0
330
Other Decks in Technology
See All in Technology
歴史と背景から改めて振り返るVPC
shotashiratori
2
220
バックログを導入し やっぱやめた話
ota42y
0
180
LLM を現場で評価する
asei
4
700
FastConnect の冗長性
ocise
0
7.1k
夏休みの(最後の)宿題 for JuliaTokyo #12
antimon2
0
130
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
2024年版 運用者たちのLLM
nwiizo
3
410
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
130
LLMに日本語テキストを学習させる意義
ksaito
13
3.6k
技術力あげたい
hisaichi5518
2
2.9k
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
270
Javaにおける関数型プログラミンへの取り組み
skrb
7
280
Featured
See All Featured
The Mythical Team-Month
searls
218
43k
GitHub's CSS Performance
jonrohan
1029
450k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Code Review Best Practice
trishagee
62
16k
The Invisible Side of Design
smashingmag
295
50k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
The World Runs on Bad Software
bkeepers
PRO
64
11k
What's new in Ruby 2.0
geeforr
340
31k
Docker and Python
trallard
39
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
46
48k
Transcript
GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ FUKUOKA Engineers Day 2018
Keigo Miyasue • ͖ͭͶ͕͖ • 30ࡀ • Ո۩ΠϯςϦΞϝʔΧʔͷΤϯδχΞ • @foxtrackjp
GraphQLͱʁ
ಛ1 • FacebookͷΫΤϦݴޠ • RESTͷؒͱ͍͏ΑΓɺSQLͷؒ • GitHubͷAPIGraphQLΛ࠾༻
ಛ2 • ඞཁͳσʔλ͚ͩʹΞΫηεͰ͖Δ
ಛ3 • ୯ҰΤϯυϙΠϯτ const httpLink = new HttpLink({ uri: 'http://localhost:60000/simple/v1/cjc4fa0b0000401526lki4orj',
})
GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ
GraphcoolͱVue.jsͰͪΐͬͱ ͨ͠αʔϏεΛ࡞ͬͯΈͨ Α͘Θ͔Βͳ͍ͷ
͜Μͳͷ࡞ͬͨʂ
None
None
ͬͨαʔϏε vue-apollo αʔόʔ ΫϥΠΞϯτ Graphcool
Graphcool • ؆୯ʹGraphQLڥΛ࡞ͬͯ͘ΕΔ type User @model { id: ID! @isUnique
name: String! createdAt: DateTime! updatedAt: DateTime! posts: [Post!]! @relation(name: "UserPosts") } type Post @model { id: ID! @isUnique type: String! memo: String! minutes: Int! createdAt: DateTime! updatedAt: DateTime! owner: User! @relation(name: "UserPosts") } npm install -g graphcool graphcool-framework init Fox cd Fox graphcool-framework deploy Simple API: http://localhost:60000/simple/v1/cjc4fa0b0000401526lki4orj Relay API: http://localhost:60000/relay/v1/cjc4fa0b0000401526lki4orj Subscriptions API: ws://localhost:60000/subscriptions/v1/cjc4fa0b0000401526lki4orj
None
͔͜͜Βಥવͷϑϩϯτͷ
Vue.js + Vuex + vue-apollo export const GET_USER = gql`
query{ User(id: "cjdg6asik018w0152p0m3t2r7") { id name posts { id type minutes memo } } } ` created: function () { this.$apollo.query({ query: GET_USER, }).then(data => { this.$store.commit('updateUser', data.data.User); }) },
·ͱΊ • GraphQLָͰ͍͍ͧ • Graphcoolָʹڥߏஙͯ͘͠ΕΔͧ • Vue.jsָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢