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
600
What's Missing for Postgres Monitoring
lfittl
0
210
A Map For Monitoring PostgreSQL
lfittl
2
370
Monitoring Postgres at Scale
lfittl
1
390
Monitoring PostgreSQL at Scale
lfittl
4
230
Postgres Performance for App Developers
lfittl
2
270
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
540
PostgreSQL at a Web Startup
lfittl
3
580
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
740
Other Decks in Programming
See All in Programming
GAEログのコスト削減
mot_techtalk
0
120
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
260
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
Formの複雑さに立ち向かう
bmthd
1
900
楽しく向き合う例外対応
okutsu
0
570
sappoRo.R #12 初心者セッション
kosugitti
0
270
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
150
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
250
Conform を推す - Advocating for Conform
mizoguchicoji
3
710
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
260
Featured
See All Featured
Bash Introduction
62gerente
611
210k
Six Lessons from altMBA
skipperchong
27
3.6k
Done Done
chrislema
182
16k
Code Reviewing Like a Champion
maltzj
521
39k
Become a Pro
speakerdeck
PRO
26
5.2k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
4 Signs Your Business is Dying
shpigford
182
22k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
How to Ace a Technical Interview
jacobian
276
23k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Facilitating Awesome Meetings
lara
52
6.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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