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
3k
GraphcoolとVue.jsでちょっとしたサービスを作ってみた話
foxtrackjp
February 10, 2018
Tweet
Share
More Decks by foxtrackjp
See All by foxtrackjp
ITエンジニアが産業機器メーカーに転職してみた話
foxtrackjp
0
40
LOWYA ARを支える技術
foxtrackjp
0
200
Amazon_Connectで遊ぼう.pdf
foxtrackjp
0
340
温泉について語る
foxtrackjp
2
430
ARとかMRとかVRの話 ~実物から3Dモデルを生成するよ~
foxtrackjp
0
550
サーバーレス時代のユーザー認証を考える
foxtrackjp
13
5.2k
サーバレスアーキテクチャ
foxtrackjp
0
340
Other Decks in Technology
See All in Technology
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
220
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
2025年になってもまだMySQLが好き
yoku0825
8
4.5k
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
9.8k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
360
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
320
2025年夏 コーディングエージェントを統べる者
nwiizo
0
140
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
300
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Why Our Code Smells
bkeepers
PRO
339
57k
A designer walks into a library…
pauljervisheath
207
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
For a Future-Friendly Web
brad_frost
180
9.9k
Making Projects Easy
brettharned
117
6.4k
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ָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢