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
580
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
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
180
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
390
株式会社 Sun terras カンパニーデック
sunterras
0
230
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
sobolevn
0
150
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
860
ソフトウェア設計の実践的な考え方
masuda220
PRO
3
480
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
CSC305 Lecture 03
javiergs
PRO
0
230
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Automating Front-end Workflow
addyosmani
1371
200k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.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