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
550
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
560
What's Missing for Postgres Monitoring
lfittl
0
190
A Map For Monitoring PostgreSQL
lfittl
2
360
Monitoring Postgres at Scale
lfittl
1
370
Monitoring PostgreSQL at Scale
lfittl
4
220
Postgres Performance for App Developers
lfittl
2
240
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
500
PostgreSQL at a Web Startup
lfittl
3
560
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
710
Other Decks in Programming
See All in Programming
PHP でアセンブリ言語のように書く技術
memory1994
PRO
0
130
色々なIaCツールを実際に触って比較してみる
iriikeita
0
210
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
21
10k
qmuntal/stateless のススメ
sgash708
0
120
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
4
20k
EventSourcingの理想と現実
wenas
5
2k
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.4k
カスタムしながら理解するGraphQL Connection
yanagii
0
870
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
330
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Go言語でターミナルフレンドリーなAIコマンド、afaを作った/fukuokago20_afa
monochromegane
2
140
offers_20241022_imakiire.pdf
imakurusu
2
340
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
A designer walks into a library…
pauljervisheath
202
24k
A Modern Web Designer's Workflow
chriscoyier
692
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
140
The Power of CSS Pseudo Elements
geoffreycrofte
72
5.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
GitHub's CSS Performance
jonrohan
1030
460k
Navigating Team Friction
lara
183
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
For a Future-Friendly Web
brad_frost
174
9.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
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