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
3.1k
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
Geospatialの世界最前線を探る [2025年版]
dayjournal
3
480
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
130
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
370
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
540
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
140
SOC2取得の全体像
shonansurvivors
1
360
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
160
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
wxyzzz
0
450
Azure Well-Architected Framework入門
tomokusaba
0
260
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
11k
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.3k
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Facilitating Awesome Meetings
lara
56
6.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
GitHub's CSS Performance
jonrohan
1032
460k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Become a Pro
speakerdeck
PRO
29
5.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Speed Design
sergeychernyshev
32
1.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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ָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢