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
590
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
640
What's Missing for Postgres Monitoring
lfittl
0
230
A Map For Monitoring PostgreSQL
lfittl
2
380
Monitoring Postgres at Scale
lfittl
1
420
Monitoring PostgreSQL at Scale
lfittl
4
250
Postgres Performance for App Developers
lfittl
2
290
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
570
PostgreSQL at a Web Startup
lfittl
3
590
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
770
Other Decks in Programming
See All in Programming
NPOでのDevinの活用
codeforeveryone
0
850
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
300
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
200
Is Xcode slowly dying out in 2025?
uetyo
1
280
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
400
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
5.7k
GPUを計算資源として使おう!
primenumber
1
120
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
430
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
Unsuck your backbone
ammeep
671
58k
A Tale of Four Properties
chriscoyier
160
23k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Side Projects
sachag
455
42k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Writing Fast Ruby
sferik
628
62k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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