Powering React-based Dashboards using GraphQL and PostgreSQL

on YouTube ↗28m

" summary

Claims a practical stack: graphql-js, pg-promise and DataLoader to persist React component state into PostgreSQL. Builds a backend for React Music with tables for songs, sequencers and instruments, storing blobs in postgres JSONB, and demos adding instruments that play. Shows transforming GraphQL field selections into column lists to avoid SELECT *, uses DataLoader to batch and avoid N+1 queries, and sketches using Postgres LISTEN/NOTIFY for pushing updates; the demo runs and updates from the DB.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 0:28State
3. 2:18Picking a Database
4. 3:42Postgres Is a Hundred Percent Open-Source Database
5. 4:48React Music
6. 6:34Postgresql
7. 16:18Avoiding M plus 1 Queries
8. 19:23Demo

" related talks

• 45mBuilding Scalable APIs: PostgreSQL Meets GraphQLShalaka D, Ramya B · PGConf India 2025
• 26m@live GraphQL in Practice: Postgres-to-React Realtime Data SyncTobbe Lundberg · GraphQLConf 2026
• 24mThe Upsidedown Stack: React on the Server and Postgres in the BrowserDavid Gomes · React Miami 2025
• 09mGraphQL and React - Two Great Tastes that Taste Great TogetherAdron Hall · React Summit 2020
• 58mCrafting compelling real-time web experiences with GraphQL and ReactRob Crowley · NDC Sydney 2018
• 01h 00mPowering the Front-end with React, GraphQL and RelayMartin Artola · NDC Oslo 2023
• 18mCrafting compelling real-time web experiences with GraphQLRob Crowley · Decompress AU 2018
• 47mReact, Relay and GraphQL — a perfectly normal component approachPavel Chertorogov · FrontTalks 2016