Live Product Catalog

pg_reactive Example 1

Electronics (0 products)

Demo Commands

Run these in a psql session connected to the database: docker compose exec -T db psql -U postgres -d pg_reactive_test

-- Add a product (appears instantly)
INSERT INTO products (name, price, category)
VALUES ('Webcam Pro', 99.99, 'electronics');

-- Update a price (old card out, new card in)
UPDATE products SET price = 89.99
WHERE name = 'Mechanical Keyboard';

-- Remove a product (fades out)
DELETE FROM products
WHERE name = 'Wireless Mouse';

SDK Equivalent

React Hook

import { useLiveQuery } from 'pg-reactive/react';

function ProductCatalog() {
  const { rows, state } = useLiveQuery('electronics', {
    url: 'ws://127.0.0.1:8080'
  });

  return (
    <div className="grid">
      {rows.map(p => <ProductCard key={p.id} product={p} />)}
    </div>
  );
}

Vanilla JS (what this demo uses internally)

const ws = new WebSocket('ws://127.0.0.1:8080/ws/electronics');

ws.onmessage = (e) => {
  const msg = JSON.parse(e.data);
  if (msg.inserted) applyDelta(msg);
};