Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

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

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
310
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
0
110
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
2
260
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
1
190
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
4
200
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
2
190
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
1
230
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
3
530
27b304f67c0cadfa2f37a19f01af8f89?s=48 lfittl
4
650

Other Decks in Programming

See All in Programming
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
160
D8da26d8c2f31098cb33d5d6087e6668?s=48 shuheiyamada
0
170
Fa9a512d547f66e1733ef8c9fcbfd009?s=48 atsushikoga
0
370
7a0892afffbcbd35fd84d46508b3a914?s=48 dropout009
2
610
9a6e4623f9314c5e1fc99635ac9617ed?s=48 nkzn
6
4.2k
2564c99f616f1ecfc0f617a6fe87e2a9?s=48 penguin045
0
820
23e7f90fa36af44f13000c1229240984?s=48 uri
1
190
Cfbe23392787cb3ad4689c5f72463fcc?s=48 makicamel
3
600
Cb504213a5310e01faabbc0b3fca3d39?s=48 napple29
0
150
Ca17a082a30f4cbfed1d0a6dacbe3af2?s=48 shin1x1
PRO
13
3.5k
Ee4cc84c4dedde009c013c6d5f1a2e84?s=48 tatchnicolas
2
190
A73ed5cefbbd84abd2c5e14a5eb4a339?s=48 ippey
8
680

Featured

See All Featured
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
223
120k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.9k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
750
245cee81a9c424266e5e401d844ea881?s=48 lara
27
3.4k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
400k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
99
15k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
32
1.1k
79acae287842acf29084005533a7fb3b?s=48 hursman
111
9.5k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
261
36k

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