convex-realtime

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.

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.

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.

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.

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.