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
37
LOWYA ARを支える技術
foxtrackjp
0
200
Amazon_Connectで遊ぼう.pdf
foxtrackjp
0
330
温泉について語る
foxtrackjp
2
430
ARとかMRとかVRの話 ~実物から3Dモデルを生成するよ~
foxtrackjp
0
540
サーバーレス時代のユーザー認証を考える
foxtrackjp
13
5.2k
サーバレスアーキテクチャ
foxtrackjp
0
330
Other Decks in Technology
See All in Technology
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
330
Microsoft Season of Agent AI エージェントの使用開始
takas0522
0
130
新卒から4年間、20年もののWebサービスと向き合って学んだソフトウェア考古学 - PHPカンファレンス新潟2025 / new graduate 4year software archeology
oguri
2
350
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
740
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
670
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
190
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
170
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
いまさら聞けない Git 超入門 〜Gitって結局なに?から始める第一歩〜
devops_vtj
0
150
MCP Clientを活用するための設計と実装上の工夫
yudai00
1
740
継続戦闘能⼒
sansantech
PRO
0
220
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Fireside Chat
paigeccino
37
3.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Facilitating Awesome Meetings
lara
54
6.4k
How to Ace a Technical Interview
jacobian
276
23k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building Applications with DynamoDB
mza
95
6.4k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
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ָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢