GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

27b304f67c0cadfa2f37a19f01af8f89?s=47 Lukas Fittl
August 26, 2016
Programming
1
410

GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

The Easy Way to Persisting Data in React

https://github.com/lfittl/beatql

27b304f67c0cadfa2f37a19f01af8f89?s=128

Lukas Fittl

August 26, 2016
Tweet

More Decks by Lukas Fittl

See All by Lukas Fittl
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
0
260
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
0
82
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
2
230
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
1
130
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
4
200
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
2
180
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
1
190
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
3
520
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
4
630

Other Decks in Programming

See All in Programming
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
170
53850955f15249a1a9dc49df6113e400?s=48 line_developers
5
1.4k
B85111454fe19a425c375a28bc27996b?s=48 kitsuneeee
4
520
6170c1d1970baf2a36a9ae2955e47ff3?s=48 jimhester
0
250
7f68f5f85f4a39df7d8d3c81cbbfb788?s=48 p1ass
0
120
3b38214ae9927683d69680cb6161852b?s=48 jorgecastilloprz
0
1.5k
7edddae207b212e5e035133d9eb10b82?s=48 russhwolf
1
160
E120f1fcd6d2811ea5e06d110566a543?s=48 tanakarian
0
280
342dde780fe56d44bdeada4bb429145a?s=48 codingluka
3
1.3k
Dee939e8aa52d13793b2f0c5e463777b?s=48 julep
1
130
354e3e2cfb772abdf62bd92c92f89547?s=48 tarunpothulapati
0
120
C302e84057a922dce0ecbe80207e3fcc?s=48 mu_zaru
1
130

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
331
29k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
26
1.8k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
494
110k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
10k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
66
2.9k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
220
15k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
268
16k
78b475797a14c84799063c7cd073962f?s=48 holman
460
280k
91cefdf141106fa10674aae74ce05890?s=48 yeseniaperezcruz
299
31k

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