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
570
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
630
What's Missing for Postgres Monitoring
lfittl
0
220
A Map For Monitoring PostgreSQL
lfittl
2
370
Monitoring Postgres at Scale
lfittl
1
400
Monitoring PostgreSQL at Scale
lfittl
4
240
Postgres Performance for App Developers
lfittl
2
280
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
550
PostgreSQL at a Web Startup
lfittl
3
580
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
750
Other Decks in Programming
See All in Programming
海外のアプリで見かけたかっこいいTransitionを真似てみる
shogotakasaki
1
170
Optimizing JRuby 10
headius
0
340
サービスレベルを管理してアジャイルを加速しよう!! / slm-accelerate-agility
tomoyakitaura
1
180
Enterprise Web App. Development (1): Build Tool Training Ver. 5
knakagawa
1
110
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
310
Amazon CloudWatchの地味だけど強力な機能紹介!
itotsum
0
160
DataStoreをテストする
mkeeda
0
290
エンジニアが挑む、限界までの越境
nealle
1
210
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
670
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.4k
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
160
国漢文混用体からHolloまで
minhee
1
190
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
KATA
mclloyd
29
14k
Statistics for Hackers
jakevdp
798
220k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
9
750
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.2k
Music & Morning Musume
bryan
47
6.5k
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