Preloading Next.js thread messages and then reading them with useThreadMessages
Hey there, I am trying to preload useThreadMessages using preloadQuery but running into some issues.
Preloading in my Next.js page component like:
const preloadedMessages = await preloadQuery(api.chat.listMessages, {
threadId,
paginationOpts: {
numItems: 10,
cursor: null,
},
});
And then trying to figure out the syntax to pass this to useThreadMessages. Right now my error is
const messages = useThreadMessages(
preloadedMessages,
{ threadId },
{ initialNumItems: 10, stream: true },
);
Anyone have experience preloading thread messages in Next.js then passing them to useThreadMessages so they are reactive? Using the agent component and Nextjs package.
2 Replies
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!
The best approach for now is to use preloadQuery to load just the first page, and separately have the actual usePaginatedQuery load the first page on the client.