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
610
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
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
860
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.2k
Better Code Design in PHP
afilina
0
170
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
SwiftUI Viewの責務分離
elmetal
PRO
2
270
自力でTTSモデルを作った話
zgock999
0
100
ファインディLT_ポケモン対戦の定量的分析
fufufukakaka
0
920
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Datadog Workflow Automation で圧倒的価値提供
showwin
1
160
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
The Invisible Side of Design
smashingmag
299
50k
Gamification - CAS2011
davidbonilla
80
5.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
276
23k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
How STYLIGHT went responsive
nonsquared
98
5.4k
Statistics for Hackers
jakevdp
797
220k
A Philosophy of Restraint
colly
203
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
A better future with KSS
kneath
238
17k
Automating Front-end Workflow
addyosmani
1368
200k
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