Deragon•2mo ago

Convex useQuery Not Updating in Real-Time

Convex useQuery Not Updating in Real-Time I'm building an npm package (xerexjs) for real-time notifications in React/Next.js using Convex. The useQuery for fetching notifications requires a manual refresh instead of updating in real-time. Schema

export default defineSchema({
  members: defineTable({
    developerUserId: v.string(),
    notifications: v.optional(v.array(v.id("notifications"))),
  }),

  notifications: defineTable({
    content: v.string(),
    buttonText: v.string(),
    buttonUrl: v.string(),
    recipients: v.array(v.id("members")),
  }).index("by_recipient", ["recipients"]),
});

export default defineSchema({
  members: defineTable({
    developerUserId: v.string(),
    notifications: v.optional(v.array(v.id("notifications"))),
  }),

  notifications: defineTable({
    content: v.string(),
    buttonText: v.string(),
    buttonUrl: v.string(),
    recipients: v.array(v.id("members")),
  }).index("by_recipient", ["recipients"]),
});

Query Function

export const getAllNotifications = query({
  args: { userId: v.id("members") },
  handler: async (ctx, args) => {
    return await ctx.db
      .query("notifications")
      .filter((q) => q.field("recipients").contains(args.userId))
      .order("desc")
      .collect();
  },
});

export const getAllNotifications = query({
  args: { userId: v.id("members") },
  handler: async (ctx, args) => {
    return await ctx.db
      .query("notifications")
      .filter((q) => q.field("recipients").contains(args.userId))
      .order("desc")
      .collect();
  },
});

Client-Side Usage

const notifications = useQuery(api.notification.getAllNotifications, { userId });

const notifications = useQuery(api.notification.getAllNotifications, { userId });

Issue - New notifications don't appear in real-time; they require a refresh. - console.log(notifications) inside useEffect only updates on refresh. Troubleshooting Steps Tried - Restarting the dev server - Clearing cache - Checking Convex version (v1.19.2) Question Am I missing something to trigger real-time updates?

4 Replies

Convex Bot•2mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

marnec•2mo ago

I never used Nextjs, but I think that if you are in a server component your should use preloadQuery, in a client component you should use usePreloadQuery see here for more https://docs.convex.dev/client/react/nextjs/server-rendering

Next.js Server Rendering | Convex Developer Hub

Next.js automatically renders both Client and Server Components on the server

lee•2mo ago

Your convex query does q.field().contains() which isn't a function. Check your terminal running npx convex dev and i expect you'll see a typescript error that's preventing new code from getting pushed

lee•2mo ago

And see this article for how to implement this pattern https://stack.convex.dev/complex-filters-in-convex

Using TypeScript to Write Complex Query Filters

There’s a new Convex helper to perform generic TypeScript filters, with the same performance as built-in Convex filters, and unlimited potential.

Convex useQuery Not Updating in Real-Time

Did you find this page helpful?