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
650
What's Missing for Postgres Monitoring
lfittl
0
240
A Map For Monitoring PostgreSQL
lfittl
2
380
Monitoring Postgres at Scale
lfittl
1
430
Monitoring PostgreSQL at Scale
lfittl
4
260
Postgres Performance for App Developers
lfittl
2
300
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
590
PostgreSQL at a Web Startup
lfittl
3
600
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
780
Other Decks in Programming
See All in Programming
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
CSC509 Lecture 07
javiergs
PRO
0
250
AkarengaLT vol.38
hashimoto_kei
1
130
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
130
Catch Up: Go Style Guide Update
andpad
0
260
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
CSC305 Lecture 11
javiergs
PRO
0
280
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Building an army of robots
kneath
305
46k
Done Done
chrislema
185
16k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
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