GraphQL ❤ PostgreSQL -- P.S. aka BeatQL

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

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