convex-realtime_skill

Overview

This skill provides patterns and ready-made examples for building reactive applications with Convex. It covers subscription management, optimistic updates, smart caching, and cursor-based pagination to help you ship fast, real-time features. The focus is practical code patterns and production-ready flows for JavaScript/React apps.

How this skill works

The skill demonstrates how Convex hooks create automatic real-time subscriptions (useQuery and usePaginatedQuery) and share cached results across components. It shows optimistic mutations that update a local store immediately and roll back on error, plus server-side pagination handlers that return cursor-based pages. Example components illustrate conditional queries, multiple concurrent subscriptions, infinite scroll, and consistent re-rendering only when relevant data changes.

When to use it

• Building real-time lists, dashboards, or chat where live updates are required
• Implementing optimistic UX for fast perceived writes (e.g., create/toggle items)
• Loading large sets of data with cursor-based pagination or infinite scroll
• Sharing query results across components to avoid duplicate fetches
• Combining multiple independent subscriptions in one screen (e.g., user, tasks, notifications)

Best practices

• Use "skip" for conditional queries instead of conditionally calling hooks
• Handle undefined return values explicitly to represent loading state
• Implement optimistic updates for mutations to improve perceived performance and rely on built-in rollbacks on error
• Use usePaginatedQuery for large datasets and tune page sizes to avoid over-fetching
• Memoize derived data to avoid unnecessary re-renders and keep components lean

Example use cases

• Real-time chat: server query for latest messages, client auto-scroll, and send mutation with optimistic insert
• Task manager: live task list with create/toggle mutations and optimistic updates for immediate UI feedback
• Dashboard: multiple independent subscriptions (user profile, tasks, notifications) that update without interfering
• Infinite scroll feed: usePaginatedQuery with IntersectionObserver to load more items on demand
• Cursor-based history viewer: server-side paginate over ordered records with stable cursors