convex-realtime

Implement reactive Convex data flows with useQuery, useMutation, and usePaginatedQuery.

Updated May 4, 2024

Search Tags:#subscriptions #react #realtime #pagination #convex #optimistic-updates

Ready to run

npx skills add https://github.com/kcrlee/dots --skill convex-realtime-kcrlee

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: convex-realtime
Source: https://github.com/kcrlee/dots/tree/main/claude/.claude/skills/convex-realtime
Command: npx skills add https://github.com/kcrlee/dots --skill convex-realtime-kcrlee

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build reactive applications that stay in sync with Convex data, reducing manual refresh logic and making UI updates feel instant.

Core Features & Use Cases

Automatic Subscriptions: Use real-time queries that update whenever the underlying data changes.
Optimistic UI Patterns: Show user actions immediately while Convex confirms the mutation in the background.
Cursor-Based Pagination: Load large result sets efficiently with paginated queries and incremental loading.
Use Case: Build a chat, task dashboard, or notification feed where data updates live, loading states are handled cleanly, and longer lists can be expanded without blocking the interface.

Quick Start

Ask the assistant to implement a Convex React screen with real-time queries, optimistic updates, and paginated loading for your data model.

Frequently Asked Questions about convex-realtime

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I set up real-time queries in React with Convex?▼

Real-time queries in React with Convex use the `useQuery` hook to automatically subscribe to data changes. Your UI updates instantly whenever the underlying database data changes, eliminating the need for manual refresh logic or polling.

What's the best way to implement optimistic updates in a Convex React app?▼

Optimistic updates in a Convex React app show user actions immediately while the mutation is confirmed in the background. Using `useMutation` patterns with rollback-safe updates ensures the UI reverts cleanly if the server mutation fails.

How does cursor-based pagination work with Convex paginated queries?▼

Cursor-based pagination with Convex uses `usePaginatedQuery` to load large result sets efficiently. It enables incremental loading of data chunks with proper loading-state checks, ensuring the interface remains responsive while expanding longer lists.

Can I use conditional data loading and skip handling with Convex subscriptions?▼

Conditional data loading with Convex subscriptions supports skip handling to pause queries when not needed. This prevents unnecessary data fetching and subscription overhead when specific UI components are unmounted or conditions are unmet.

How do I manage loading states for reactive Convex data flows?▼

Managing loading states for reactive Convex data flows involves checking loading-state flags provided by `useQuery` and `usePaginatedQuery` hooks. This ensures your UI cleanly handles initial data fetching and incremental pagination updates without blocking.