Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

Avatar for Lukas Fittl Lukas Fittl
August 26, 2016
Programming
660
1

GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

The Easy Way to Persisting Data in React

https://github.com/lfittl/beatql

Avatar for Lukas Fittl

Lukas Fittl

August 26, 2016

More Decks by Lukas Fittl

See All by Lukas Fittl
How to Scale Postgres - Automation, Tuning & Sharding
Avatar for Lukas Fittl lfittl
0
700
What's Missing for Postgres Monitoring
Avatar for Lukas Fittl lfittl
0
310
A Map For Monitoring PostgreSQL
Avatar for Lukas Fittl lfittl
2
430
Monitoring Postgres at Scale
Avatar for Lukas Fittl lfittl
1
510
Monitoring PostgreSQL at Scale
Avatar for Lukas Fittl lfittl
4
300
Postgres Performance for App Developers
Avatar for Lukas Fittl lfittl
2
350
Hacking PostgreSQL to Gain SQL Parsing Superpowers
Avatar for Lukas Fittl lfittl
1
650
PostgreSQL at a Web Startup
Avatar for Lukas Fittl lfittl
3
640
Advanced pg_stat_statements: Filtering, Regression Testing & more
Avatar for Lukas Fittl lfittl
4
850

Other Decks in Programming

See All in Programming
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
9.2k
設計次第でAIコードの読む量は減らせる / designing-for-code-reading
Avatar for MinoDriven minodriven
30
13k
技術的負債の返済は、AI時代の複利で効く投資 — 経営としての意思決定とその遂行
Avatar for curekoshimizu curekoshimizu
1
2k
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
480
Ghostty + Neovimで作る 透明でカッコ良い開発環境
Avatar for Kanade Nonomura j341nono
0
150
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
410
フロントエンドUIフレームワークのこれまでとこれから
Avatar for TOMIKAWA Sotaro ssssota
5
3.1k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
430
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
510
カツオ、ご期待ください
Avatar for saku_totomi suneo3476
0
120
Streamlitで実現する自然言語データアプリ開発
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
330
スマートフォンでモールス信号を送受信する 〜スマートフォンのLEDとカメラで作る光通信の設計と実装〜
Avatar for Atsuki Seo atsuki_seo
0
210

Featured

See All Featured
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
460
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
4
53k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
74
42k
How to Grow Your eCommerce with AI & Automation
Avatar for Katarina Dahlin katarinadahlin
PRO
2
290
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
142
7.7k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
300
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
47
8.3k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
290

Transcript

  1. GraphQL ❤ PostgreSQL The Easy Way to Persisting Data in

    React @LukasFittl

  2. Lets talk about State

  3. https://xkcd.com/1653/

  4. State

  5. State State State State

  6. State State State State State State State

  7. State Store

  8. State Store “The Server”

  9. Serverless != Stateless

  10. “The Server” “The Server” “The Server”

  11. “The Server” “The Database” “The Server” “The Server”

  12. “The Server” “The Database” “The Server” “The Server”

  13. <===> State <===> <===>

  14. Picking a Database

  15. MySQL MongoDB PostgreSQL CockroachDB RethinkDB Cassandra Dynamo

  16. MySQL MongoDB PostgreSQL CockroachDB RethinkDB Cassandra Dynamo

  17. Why PostgreSQL?

  18. 1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open

    Source, Community Included Why PostgreSQL?

  19. 1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open

    Source, Community Included Why PostgreSQL?

  20. 1. Fast & Reliable 2. Deploy Anywhere 3. 100% Open

    Source, Community Included Why PostgreSQL?

  21. Advanced Query Planner It also has: UPSERT Complex Types JSONB

    JOINs Window Functions CTEs High Availability LISTEN/NOTIFY

  22. What We’re Going To Build

  23. Dashboards & Stuff

  24. Dashboards & Stuff

  25. None

  26. github.com/ FormidableLabs/react-music

  27. None

  28. Lets build a GraphQL Backend for react-music

  29. GraphQL + PostgreSQL + react-music = BeatQL github.com/lfittl/beatql

  30. Choosing a Backend Library

  31. graphql-js + pg-promise

  32. graphql-ruby + pg

  33. postgraphql https://github.com/calebmer/postgraphql

  34. [ $ new library ]

  35. [ $ new library ]

  36. graphql-js + pg-promise + dataloader

  37. Figuring Out The Schema

  38. Songs, Sequencers, Instruments

  39. SQL!

  40. None
  41. None
  42. None
  43. None

  44. GraphQL!

  45. None
  46. None
  47. None

  48. Sample Data

  49. None

  50. Based On relay-starter-kit

  51. github.com/lfittl/beatql

  52. data/

  53. data/database.js

  54. None
  55. None
  56. None
  57. None

  58. data/schema.js

  59. None
  60. None
  61. None
  62. None

  63. Getting Only The Data You Need

  64. None
  65. None
  66. None
  67. None

  68. data/database-helpers.js

  69. Avoiding N+1 Queries

  70. DataLoader!

  71. None

  72. data/database-helpers.js

  73. client/

  74. client/components/ App.js

  75. None
  76. None

  77. [ Demo ]

  78. @LukasFittl github.com/lfittl/beatql FormidableLabs/react-music