TanStack Start and Convex Pagination glitches
TanStack Start 1.111.10, and Convex bits version as of today. I'm loading a component into an Outlet that is a table that displays a list of models of devices. Using the instructions for Paginated Queries I'm able to load 10 items at a time, but there one odd (to me) behavior and one crash.
Odd behavior - I have a Load More button that does load more, but it reloads Outlet. Is that nomral? I thought it would just append to the end of the table. It's not doing a full root reload, but its reloading the outlet and adding 10.
Crash - when I get to the end of the rows, TanStack crashes with the following.
[CONVEX Q(deviceModels:getAllModels)] [Request ID: 9c6fbc4b7cfc4b65] Server Error
Uncaught TypeError: Must provide arg 1 "id" to "get"
at <anonymous> (../convex/deviceModels.ts:29:34)
at map [as map] (<anonymous>)
at handler (../convex/deviceModels.ts:28:14)
Called by client
There is a key=ID on each table row. Like I said, this only happens when I try to load the last page of results. Feels like a TanStank Start glitch? Something to do with the query maybe? Typical Convex queries need some extra convexQuery love so I'm wondering it this is a TSStart/Convex/TSQuery interaction.5 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!
Which instructions for paginated queries, the Convex
usePaginatedQuery hook?
for Uncaught TypeError: Must provide arg 1 "id" to "get, can you console.log that value? Sounds like it might be undefined somehow?
This is a server-side error, which since it isn't caught is throwing in a React component. You can use an error boundary to prevent this.
Based on the crash, I'm guessing you're using the usePaginatedQuery hook imported from convex. So re odd behavior, I don't know why that would reload Outlet. What does reloading Outlet mean, the render funciton runs again?So, I'm not crazy. I have another project I'm working on that I haven't touched in a few weeks that I basically copied and pasted the code for pagination and queries, but it is still running "@tanstack/start": "^1.97.2", and it works as I remember. The component in the outlet does not reload, it is added onto, and I can get all the way to the end and it doesn't crash. So it looks like something in TSStart changed enough to break this.
Like I said, the code structure is identical, I'm just calling different databases/tables. The only difference is the version of Start and "convex": "^1.17.0". I could roll back the version of Convex in the project that is breaking to see if that makes a difference.
And I'm using this page's directions. https://docs.convex.dev/database/pagination
Paginated Queries | Convex Developer Hub
Load paginated queries.
Downgrading convex did not solve the problem in the project I originally posted about. Something must have changed in TanStack Start then?