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
GraphQL ❤ PostgreSQL -- P.S. aka BeatQL
Search
Lukas Fittl
August 26, 2016
Programming
1
540
GraphQL ❤ PostgreSQL -- P.S. aka BeatQL
The Easy Way to Persisting Data in React
https://github.com/lfittl/beatql
Lukas Fittl
August 26, 2016
Tweet
Share
More Decks by Lukas Fittl
See All by Lukas Fittl
How to Scale Postgres - Automation, Tuning & Sharding
lfittl
0
530
What's Missing for Postgres Monitoring
lfittl
0
180
A Map For Monitoring PostgreSQL
lfittl
2
350
Monitoring Postgres at Scale
lfittl
1
350
Monitoring PostgreSQL at Scale
lfittl
4
220
Postgres Performance for App Developers
lfittl
2
230
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
460
PostgreSQL at a Web Startup
lfittl
3
550
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
710
Other Decks in Programming
See All in Programming
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
Async Await: Mastering Python's Time-Bending Tricks - EuroPython2024
yanbo
1
290
CSC307 Lecture 10
javiergs
PRO
0
310
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
最近追加した型の紹介とその振り返り
aki19035vc
0
180
継続的な活動で築く地方エンジニアの道
myamashii
2
360
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
유연한 Composable 설계
l2hyunwoo
0
380
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
AHC035解説
terryu16
0
730
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
63
11k
Become a Pro
speakerdeck
PRO
15
4.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
The Mythical Team-Month
searls
217
43k
A Philosophy of Restraint
colly
200
16k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Designing for humans not robots
tammielis
247
25k
Music & Morning Musume
bryan
43
5.9k
Typedesign – Prime Four
hannesfritz
37
2.2k
Side Projects
sachag
451
42k
Transcript
GraphQL ❤ PostgreSQL The Easy Way to Persisting Data in
React @LukasFittl
Lets talk about State
https://xkcd.com/1653/
State
State State State State
State State State State State State State
State Store
State Store “The Server”
Serverless != Stateless
“The Server” “The Server” “The Server”
“The Server” “The Database” “The Server” “The Server”
“The Server” “The Database” “The Server” “The Server”
<===> State <===> <===>
Picking a Database
MySQL MongoDB PostgreSQL CockroachDB RethinkDB Cassandra Dynamo
MySQL MongoDB PostgreSQL CockroachDB RethinkDB Cassandra Dynamo
Why PostgreSQL?
1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open
Source, Community Included Why PostgreSQL?
1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open
Source, Community Included Why PostgreSQL?
1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open
Source, Community Included Why PostgreSQL?
Advanced Query Planner It also has: UPSERT Complex Types JSONB
JOINs Window Functions CTEs High Availability LISTEN/NOTIFY
What We’re Going To Build
Dashboards & Stuff
Dashboards & Stuff
None
github.com/ FormidableLabs/react-music
None
Lets build a GraphQL Backend for react-music
GraphQL + PostgreSQL + react-music = BeatQL github.com/lfittl/beatql
Choosing a Backend Library
graphql-js + pg-promise
graphql-ruby + pg
postgraphql https://github.com/calebmer/postgraphql
[ $ new library ]
[ $ new library ]
graphql-js + pg-promise + dataloader
Figuring Out The Schema
Songs, Sequencers, Instruments
SQL!
None
None
None
None
GraphQL!
None
None
None
Sample Data
None
Based On relay-starter-kit
github.com/lfittl/beatql
data/
data/database.js
None
None
None
None
data/schema.js
None
None
None
None
Getting Only The Data You Need
None
None
None
None
data/database-helpers.js
Avoiding N+1 Queries
DataLoader!
None
data/database-helpers.js
client/
client/components/ App.js
None
None
[ Demo ]
@LukasFittl github.com/lfittl/beatql FormidableLabs/react-music