convex-realtime

Implement reactive Convex subscriptions, optimistic updates, and cursor-based pagination in React applications.

Updated May 28, 2026

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

Ready to run

npx skills add https://github.com/mrisoli/pokerhouse --skill convex-realtime-mrisoli

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building reactive React apps with Convex requires correctly handling subscriptions, loading states, optimistic updates, and pagination, and mistakes like conditional hook calls or missing undefined checks cause bugs and poor user experience. ## Core Features & Use Cases - Real-time Subscriptions: Patterns for useQuery, conditional queries with "skip", and managing multiple concurrent subscriptions. - Optimistic Updates: Implement withOptimisticUpdate for single documents and lists so UI changes appear before server confirmation. - Cursor-Based Pagination: Use usePaginatedQuery with loadMore controls and infinite scroll via IntersectionObserver. - Use Case: Build a real-time chat room where messages stream in live, sending a message updates the UI instantly, and older history loads on scroll. ## Quick Start Ask the AI to build a React component that subscribes to a Convex query with optimistic updates and paginated loading for a large message list.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema

How do I use Convex useQuery for real-time subscriptions in React?▼

Call useQuery with a Convex API function and arguments inside a React component to create an automatic subscription. The hook returns undefined while loading and re-renders the component whenever the underlying data changes on the server.

How to add optimistic updates to Convex mutations?▼

Use useMutation with .withOptimisticUpdate, providing a callback that reads and writes the local store via getQuery and setQuery. The UI updates immediately, and Convex automatically rolls back the optimistic change if the mutation fails.

How do I conditionally skip a Convex query in React?▼

Pass the string "skip" as the query arguments instead of conditionally calling the hook, which would violate React hook rules. For example, useQuery(api.users.get, userId ? { userId } : "skip") skips execution when userId is null.

Does Convex support pagination for large datasets?▼

Yes, Convex provides cursor-based pagination through the paginate method on the server and the usePaginatedQuery hook on the client. The hook returns results, a status field (CanLoadMore, LoadingMore, Exhausted), and a loadMore function.

Why is my Convex query stuck returning undefined?▼

An undefined result means the query is still loading, so the component must explicitly handle that state before rendering data. If it never resolves, verify the query function name, arguments, and that the client is connected to the correct Convex deployment.