Manually preloading a query in React
Hi, I'm using Convex in a SPA React app.
I want to preload the next route's data on mouse hover -- what's the best way to do this?
Setup:
- Every route has a
loader() function.
- The loader function returns an object
- Components can access the result of the loader with a useLoader() hook.
- When a user hovers over a link, the loader() function for that route runs and is cached for x seconds.
What's the best way to do this with Convex?
Since loader() is not a hook or component, we can't use the useQuery() hook.
Is there a Convex-native way to do this (would watchQuery() help?), or should I use a 3rd party async state management library?1 Reply
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!