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
38
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
330
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
2
400
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
1
400
Azure AI Foundryでマルチエージェントワークフロー
seosoft
0
150
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
A2Aのクライアントを自作する
rynsuke
1
160
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
160
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
250
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
240
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
900
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
7
800
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
0
140
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Git: the NoSQL Database
bkeepers
PRO
430
65k
Speed Design
sergeychernyshev
31
1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Building Applications with DynamoDB
mza
95
6.5k
Docker and Python
trallard
44
3.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Producing Creativity
orderedlist
PRO
346
40k
The Cult of Friendly URLs
andyhume
79
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ָ͍ͧ͠ • ͖ͭͶ͔Θ͍͍ͧ •
גࣜձࣾϕΨίʔϙϨʔγϣϯͰΤϯδχΞΛืू͠ ͓ͯΓ·͢