TanStack DB Table Demo with ElectricSQL

This demo showcases the integration of TanStack Table with ElectricSQL, demonstrating both problematic (infinite loop) and correct implementations when using reactive data queries.

Prerequisites

• Node.js 18+ and pnpm
• A Supabase account (free tier works)
• An ElectricSQL Cloud account (free tier works)

Setup Instructions

1. Install Dependencies

pnpm install

2. Set up Supabase

1. Go to Supabase and create a new project (free tier)
2. Once created, go to your project settings
3. Navigate to Settings → Database
4. Copy the Connection string (URI) - you'll need the "Transaction" mode URL
5. Make note of your database password

3. Set up ElectricSQL Cloud

1. Go to ElectricSQL Cloud and sign up (free)
2. Create a new app with the supabase database as the source
3. In your app dashboard, find your:
   • Source ID (looks like: 2559f49f-62fc-4986-b7c0-cfb683b4c5bc)
   • Source Secret (a JWT token)
4. Keep these handy for the next step

4. Configure Environment Variables

Create a .env file in the project root:

# Supabase Database URL (from step 2.4)
DATABASE_URL=postgresql://postgres.[PROJECT-REF]:[YOUR-PASSWORD]@aws-0-[REGION].pooler.supabase.com:6543/postgres

# ElectricSQL Cloud (from step 3.3)
ELECTRIC_URL=https://api.electric-sql.cloud
ELECTRIC_SOURCE_ID=your-source-id-here
ELECTRIC_SOURCE_SECRET=your-source-secret-jwt-here

5. Generate Database Schema

pnpm db:generate

This will generate the database schema based on the Drizzle configuration.

6. Run Database Migrations

pnpm db:migrate

This creates the todos table in your Supabase database.

7. Start the Proxy Server

In one terminal, start the ElectricSQL proxy server:

pnpm tsx ./server.ts

The server will start on http://localhost:3000 and proxy ElectricSQL requests with authentication.

8. Start the Development Server

In another terminal, start the Vite development server:

pnpm run dev

Open http://localhost:5173 in your browser.

9. Add Sample Data (Optional)

To see the demo in action, you can add some todos through the Supabase UI:

1. Go to your Supabase project dashboard
2. Navigate to Table Editor in the left sidebar
3. Select the todos table
4. Click Insert → Insert row
5. Add a few sample todos with:
   • title: Any text like "Buy groceries" or "Write documentation"
   • completed: Toggle true/false
   • Leave id and createdAt empty (they'll be auto-generated)
6. Click Save to add the todo

The todos will automatically sync to your app through ElectricSQL!

What You'll See

The demo includes a switcher between two implementations:

1. Todo Inline (problematic) - Demonstrates the infinite loop issue when using useLiveQuery directly with TanStack Table
2. Todo Wrapper (solution) - Shows the correct pattern using a wrapper component to handle data fetching

The Problem

When using useLiveQuery directly in a component that also uses TanStack Table, the reactive query creates new references on each render, causing infinite re-renders.

The Solution

Separate data fetching concerns by:

• Creating a wrapper component that handles the useLiveQuery
• Passing stable data props to the table component
• Keeping TanStack Table isolated from reactive data sources

Project Structure

src/
├── todo-inline/
│   └── TodoTable.tsx       # Problematic implementation (infinite loops)
├── todo-wrapper/
│   ├── TodoTable.tsx       # Clean table component
│   └── TodoTableWrapper.tsx # Data fetching wrapper
├── electric.config.ts      # ElectricSQL configuration
├── todo.collection.ts      # TanStack DB collection setup
└── App.tsx                 # Main app with implementation switcher

server.ts                   # ElectricSQL proxy server

Troubleshooting

"500 Internal Server Error" from proxy

• Check server console for detailed error logs
• Verify your ELECTRIC_SOURCE_ID and ELECTRIC_SOURCE_SECRET are correct
• Ensure your Supabase database is accessible

CORS errors

• Make sure the proxy server is running on port 3000
• Check that the Vite dev server is on port 5173

No data showing

• Verify the todos table exists in Supabase
• Check ElectricSQL Cloud console for sync status
• Ensure migrations ran successfully

Learn More

• TanStack Table Documentation
• ElectricSQL Documentation
• TanStack DB Documentation