Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
GraphQL ❤ PostgreSQL -- P.S. aka BeatQL
Search
Lukas Fittl
August 26, 2016
Programming
670
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
GraphQL ❤ PostgreSQL -- P.S. aka BeatQL
The Easy Way to Persisting Data in React
https://github.com/lfittl/beatql
Lukas Fittl
August 26, 2016
Transcript
78 slides
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
More Decks by Lukas Fittl
See All by Lukas Fittl
How to Scale Postgres - Automation, Tuning & Sharding
lfittl
0
710
What's Missing for Postgres Monitoring
lfittl
0
320
A Map For Monitoring PostgreSQL
lfittl
2
430
Monitoring Postgres at Scale
lfittl
1
520
Monitoring PostgreSQL at Scale
lfittl
4
310
Postgres Performance for App Developers
lfittl
2
360
Hacking PostgreSQL to Gain SQL Parsing Superpowers
lfittl
1
660
PostgreSQL at a Web Startup
lfittl
3
660
Advanced pg_stat_statements: Filtering, Regression Testing & more
lfittl
4
860
Other Decks in Programming
See All in Programming
AIで開発が速くなった先で、開発チームは何を目指すか
shihochan
1
2k
3回つくってわかった、 定期実行ジョブ基盤の本質情報
takai
4
3.9k
Rails初心者がパスキーを実装してみて大変だったこと
ktombow
0
180
AI時代のシニアエンジニアとは
yosuke_furukawa
PRO
15
11k
仕様駆動開発入門 (何を作るかを先に決めて渡す) | 目指せ Kiro マスター 05
inariku
PRO
2
140
まずはコードより業務と向き合う:テーブル解体のためにPdMを呼んだ話
sakawe_ee
0
220
FactoryBotをやめればRSpecは速くなるのか?
yuta_onishi_97
0
1.7k
protojson における文字化けの扱い
kazuki1023
0
400
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
140
[DroidKnights 2026] Workflow AX: From Auto-Documented Policies to E2E Testing
raeminkang
0
570
Web Framework Benchmark Battle 2026, Any%
a_matsuda
3
3.2k
AIが生成したコードは読むべきか?抽象化設計とコードの品質保証 / abstraction-design-and-quality
minodriven
16
9.1k
Featured
See All Featured
The browser strikes back
jonoalderson
0
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
56
3.5k
SEO for Brand Visibility & Recognition
aleyda
0
4.9k
The untapped power of vector embeddings
frankvandijk
2
2k
Lightning Talk: Beautiful Slides for Beginners
inesmontani
PRO
2
790
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.4k
4 Signs Your Business is Dying
shpigford
187
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
8.4k
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.7k
Heart Work Chapter 1 - Part 1
lfama
PRO
11
37k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k