What's wrong with the following simple line of code?
Schema:
readyTitles: defineTable({
name: v.string(),
category: v.optional(v.string()),
}).index("by_name", ["name"]),
Query:
export const collectTitles = query({
handler: async (ctx) => {
const titles = await ctx.db
.query("readyTitles")
.withIndex("by_name")
.collect();
return titles;
},
});
And, the page.tsx where I want to display all the title names:
...
const titles = useQuery(api.titles.collectTitles);
// some more code
<div className="grid gap-4 space-y-4">
<h3>Essay Titles:</h3>
{titles?.map((title) => (
<p key={title._id}>{title.name}</p>
))}
</div>
I want all the readyTitles to be displayed on page.tsx. I think I followed the docs correctly, but, no result. Just empty space instead of the list of mapped titles.
The table data was generated manually using the convex.dev dashboard, and seems like they are all saved, because once i logged off and logged in the data is there.
What am i missing?
Please, help me solve this small issue. I am new to web dev and still in my learning journey.
Thanks beforehand!3 Replies
- Any errors in your convex dashboard or in the browser console?
- Are you sure you inserted data in the right deployment? Eg., if you're testing this on your dev deployment, make sure your manual data entry was in your dev database and not your prod database.
I haven't tried not specifying an args object in a query and not passing in an args object to useQuery as typescript won't stand for it. I assume it works fine in js, but you could try adding and empty args object to your query.
Also, just an aside, your index is currently just causing the results to be sorted. That seems like it may be your intention, but just wanted to make sure you know that you're reading the entire table if you don't provide a range expression to
withIndex().Thank you for the feedback. I decided to delete and re-create the table and the query. It worked. However, I am still not sure why it didnt work at the initial attempts. The table is the same, however, the query looks a little different:
export const collectTitles = query({
args: {},
handler: async (ctx) => {
return await ctx.db.query("readyTitles").collect();
},
});The index wasn't doing anything but sorting, but I don't think that would have stopped it from working. The errors from Convex are pretty helpful, I'd just keep an eye out for those first when issues arise.