edink1•2y ago

Convex chat docs potential small correction

Hello 👋, I was going through the Convex Chat tutorial and when I got to the first exercise (https://docs.convex.dev/tutorial/reactor#find--fix-the-query-bug), I was surprised to see that the solution was to just use the JS .reverse function. Wouldn't it be "better" to just change the order of the messages from desc to asc instead? So from const messages = await ctx.db.query("messages").order("desc").take(100); to const messages = await ctx.db.query("messages").order("asc").take(100); Apologies if this is too nitpicky of a question.

1: The reactor | Convex Developer Hub

Learn about Convex's reactive database accessed through TypeScript cloud

3 Replies

ian•2y ago

Great question. If you have fewer than 100 messages, your solution would work well. However, if you had more, it would only grab the first 100 messages, so you’d miss new messages. Make sense?

edink1OP•2y ago

Ah I see, yeah that makes a lot of sense. Ty!! I think I found another "bug" on the chat tutorial. If you have more than 100 messages, the scrolling no longer works since we're checking the length of the messages.

useEffect(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }, [messages?.length]);

useEffect(() => {
    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
  }, [messages?.length]);

Since the length is always 100, the useEffect doesn't fire, and the page doesn't scroll to the bottom.

Michal Srb•2y ago

Both of these issues have been fixed now, check out the updated source: https://github.com/get-convex/convex-tour-chat/blob/main/src/App.tsx Thanks for the feedback!

GitHub

convex-tour-chat/src/App.tsx at main · get-convex/convex-tour-chat

Chat app for use during Convex tutorial (found at https://convex.dev/start) - get-convex/convex-tour-chat

Convex chat docs potential small correction

Did you find this page helpful?