What's the best way to handle loading states/states when the value of the query is undefined.
I have a NextJS app and I often notice a flicker after implementing convex when navigating between pages. I'm sure this is because the value gets set to undefined before it's fetched on the mounting of a component.
Is there a way to "cache" queries that haven't changed so that I can mitigate this flicker to first load and provide a loading state, a single time?
2 Replies
https://discord.com/channels/1019350475847499849/1019350478817079338/1089910325656166442 asks a similar question.
If you hoist your
useQuerys up so they remain loaded across your navigations, you'll avoid the loading experience on navigation.
This isn't always the best solution (maybe you don't want to load all the data for all your pages when you're just showing one at a time), so not sure if it suits your needs? There's been a bit of brainstorming on some better caching strategies (like perhaps holding on to a query for a little longer after an unmount in case it immediately gets requested again).Yeah something like that would be great! Or maybe a simple option to add a "invalidation" time to the request similar to
react-query!