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
How to achieve interoperable digital identity across Asian countries
fujie
0
110
KMP の Swift export
kokihirokawa
0
330
GopherCon Tour 概略
logica0419
2
170
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
290
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
多野優介
tanoyusuke
1
300
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
260
o11yで育てる、強い内製開発組織
_awache
3
110
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
1
860
Azure Well-Architected Framework入門
tomokusaba
0
260
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
hypermkt
0
2.1k
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
130
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
BBQ
matthewcrist
89
9.8k
Gamification - CAS2011
davidbonilla
81
5.5k
Building an army of robots
kneath
306
46k
Faster Mobile Websites
deanohume
310
31k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Optimizing for Happiness
mojombo
379
70k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
570
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
The Cult of Friendly URLs
andyhume
79
6.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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ָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢