T
TanStack•2y ago
other-emerald

svelte-query re-rendering page on preload

Hi, I'm trying to use svelte-query and I have a lot of it working, but I'm seeing unwanted behaviour, and I'm not sure where the fix would be. I have a page /1 that has a link to a sub page /1/foo/a. Both pages prefetch the same query as part of the load function. When viewing the /1 page you can trigger preload of the sub page by hovering/mousedown on the link depending on svelte config. This triggers the prefetch of the query if it is stale, which then triggers a re-render of the page you are viewing, which means that you scroll to the top, which is totally confusing. I could: * Set the stale time of the query to be infinite, but maybe there are cases where this isn't desirable for other reasons * Disable preloading, but it's a useful feature Maybe there's a way to share the prefetch of the query in a shared layout that would avoid this? I guess there may be cases when there is no shared layout though. Also having the page scroll on re-render when the query is refetched isn't great behaviour even ignoring the preload. That suggests there's something wrong with the way the page is being rendered around the query? Any suggestions welcome!
1 Reply
other-emerald
other-emeraldOP•2y ago
OK, one way to avoid the scroll when the query is refetched is to change the markup to not have the check for 
{#if $query.isFetching }
{#if $query.isFetching }
but instead 
{#if $query.isFetching && !$query.isRefetching }
{#if $query.isFetching && !$query.isRefetching }
Or simply 
{#if $query.isLoading}
{#if $query.isLoading}
not sure where I got isFetching from

Did you find this page helpful?