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
220
A Map For Monitoring PostgreSQL
lfittl
2
370
Monitoring Postgres at Scale
lfittl
1
390
Monitoring PostgreSQL at Scale
lfittl
4
240
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
PEPCは何を変えようとしていたのか
ken7253
3
340
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
390
Better Code Design in PHP
afilina
0
200
Swift Testingのモチベを上げたい
stoticdev
2
240
⚪⚪の⚪⚪をSwiftUIで再現す る
u503
0
150
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
910
良いコードレビューとは
danimal141
10
10k
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
350
もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです
sublimer
0
140
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
400
読もう! Android build ドキュメント
andpad
1
160
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
320
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Unsuck your backbone
ammeep
669
57k
Practical Orchestrator
shlominoach
186
10k
A Philosophy of Restraint
colly
203
16k
Docker and Python
trallard
44
3.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
50
2.3k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
410
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