Convex Integration

VitalGrid seamlessly integrates with Convex to provide real-time collaborative data management with automatic synchronization.

import { convexData } from '@fed/vital-grid/convex';

const dataSource = convexData({
  table: "users",
  query: (ctx) => ctx.db.query("users").collect(),
  mutations: {
    create: "createUser",
    update: "updateUser",
    delete: "deleteUser",
  },
});

Convex Data Source

VitalGrid provides a built-in Convex data source that handles:

• Real-time Synchronization: Automatic updates when data changes
• Optimistic Updates: Immediate UI feedback with server sync
• Offline Support: Queue operations when offline and sync on reconnect
• Query Optimization: Efficient data fetching with pagination
• Schema Validation: Type-safe data operations

Setup

1. Install Dependencies

npm install convex

2. Configure Convex Client

import { ConvexProvider } from "convex/react";
import { convexData } from "@fed/vital-grid/convex";

function App() {
  return (
    <ConvexProvider client={convexClient}>
      <VitalGridApp />
    </ConvexProvider>
  );
}

3. Create Data Source

const dataSource = convexData({
  table: "users",
  query: (ctx) => ctx.db.query("users").collect(),
  mutations: {
    create: "createUser",
    update: "updateUser",
    delete: "deleteUser",
  },
});

Features

Real-time Collaboration

• Multi-user Editing: See changes from other users in real-time
• Conflict Resolution: Automatic handling of concurrent modifications
• Presence Indicators: Show which users are currently editing
• Change History: Track and revert changes if needed

Data Synchronization

• Automatic Sync: No manual refresh required
• Incremental Updates: Only sync changed data
• Connection Management: Handle connection drops gracefully
• Error Recovery: Automatic retry with exponential backoff

Performance

• Optimized Queries: Efficient data fetching with indexes
• Caching: Local caching for improved performance
• Lazy Loading: Load data on demand
• Subscription Management: Efficient event handling

Use Cases

• Collaborative Spreadsheets: Multi-user data editing
• Project Management: Real-time task updates
• Inventory Management: Live stock level updates
• Customer Support: Real-time ticket management
• Financial Trading: Live market data updates

Best Practices

1. Schema Design: Design efficient Convex schemas
2. Query Optimization: Use appropriate indexes
3. Error Handling: Implement proper error boundaries
4. Security: Use Convex's built-in authentication
5. Testing: Test real-time scenarios thoroughly

Example Implementation

export function ConvexExample() {
  const { grid } = VitalGrid.useVitalGrid({
    dataSource: convexDataSource,
    columns: userColumns,
    enableRealTime: true,
    onRealTimeUpdate: (update) => {
      console.log('Real-time update:', update);
    },
  });

  return (
    <VitalGrid.Provider grid={grid} workspaceId="convex-example">
      <VitalGrid.Root>
        <VitalGrid.Toolbar />
        <VitalGrid.Header />
        <VitalGrid.Body />
      </VitalGrid.Root>
    </VitalGrid.Provider>
  );
}