skills.rest
kausthubh-coder
kausthubh-coderCOMMUNITY
Explore all skills by this author →
GitHub

convex-realtime

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

1|Updated Feb 19, 2026
Search Tags:#subscriptions#react#realtime#pagination#optimistic updates#convex#usequery
One-click install
npx skills add https://github.com/kausthubh-coder/kriyan-web --skill convex-realtime-kausthubh-coder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: convex-realtime
Source: https://github.com/kausthubh-coder/kriyan-web/tree/main/.cursor/skills/convex-realtime
Command: npx skills add https://github.com/kausthubh-coder/kriyan-web --skill convex-realtime-kausthubh-coder

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 stale UI. ## 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 items and lists so the UI reflects mutations before server confirmation. - Cursor-Based Pagination: Use usePaginatedQuery with loadMore status handling and IntersectionObserver-based infinite scroll. - Use Case: Build a real-time chat room where messages stream in automatically, sending a message updates the UI instantly, and older history loads on scroll. ## Quick Start Use the convex-realtime skill to add a paginated real-time message list with optimistic sending to my React component.

Frequently Asked Questions about convex-realtime

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

FAQPage Schema
How do I use useQuery for real-time data in Convex React?▼

Call useQuery with a Convex query function and arguments inside a React component, and it automatically subscribes to updates. The hook returns undefined while loading, so always check for undefined before rendering the data.

How to add optimistic updates to Convex mutations?▼

Chain .withOptimisticUpdate onto useMutation and update the local store with localStore.getQuery and localStore.setQuery. The optimistic change appears immediately and automatically rolls back if the mutation fails on the server.

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

Pass the string "skip" as the arguments to useQuery instead of conditionally calling the hook. This keeps hook order stable while disabling the subscription when required inputs like an ID are null.

Does Convex support pagination for large datasets?▼

Yes, Convex supports cursor-based pagination through the paginate method on the server and usePaginatedQuery on the client. The hook returns results, a status like CanLoadMore or Exhausted, and a loadMore function to fetch additional pages.

Why does my Convex query return undefined in React?▼

useQuery returns undefined while the subscription is loading or when the query is skipped. Treat undefined as a loading state and render a placeholder until the data arrives.

Related Skills

Explore More Software Engineering Skills→
etylsarinetylsarin
59

convex-database

Design Convex database schemas with indexes, validators, and reactive queries.

Community
Intermediate
jovermierjovermier
1

convex-self-hosting

Deploy and operate a self-hosted Convex backend with Docker and authentication.

Community
Advanced
AbdullahmohammadarefAbdullahmohammadaref

react-ui-patterns

Standardize loading, error, and optimistic UI state handling in React components.

Community
Intermediate
bytetalentbytetalent

Realtime Updates — Supabase

Subscribe to Supabase Realtime channels for live UI updates in Next.js projects.

Official
Intermediate