Svelte-Query reactive createQuery refetches despite key values not changing

[ferntheplant]

Describe the bug

I'm using Skeleton Paginators along with svelte-query to control a paginated table of data. I'm finding that whenever the Skeleton paginator mounts it sets my pagination settings object (containing the data limit and offset) to a clone of itself causing reactive statements using these settings to run.

I set up createQuery using a reactive statement with a key based on the pagination settings. I want to disable my paginator while data is loading so I used $query.isRefetching to render a loading spinner instead. The issue is that when isRefetching goes to false once the data laods my paginator renders and sets settings causing the reactive statement declaring the query to rerun and enter the isRefetching state again creating an infinite loop.

<script lang="ts">
  export let data: PageData

  let settings = { limit: 5, offset: 0 }

  $: query = createQuery({
    queryKey: ['query', settings.limit, settings.offset],
    queryFn: async () => await getData({limit: settings.limit, offset: settings.offset}),
    initialData: data.example,
    keepPreviousData: true
  })
</script>

<Table data={$query.data} />
{#if $query.isRefetching}
  <LoadingSpinner />
{:else}
  <PaginationControls {limit} {offset} total={data.total}/>
{/if}

Your minimal, reproducible example

https://github.com/ferntheplant/tanstack-repro

Steps to reproduce

See repro README

Expected behavior

I would expect the query to NOT enter the isRefetching state once the reactive statement runs because the query key values have not changed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: MacOS
• Browser: Chrome
• Version: 114.0.5735.133 (Official Build) (arm64)

Tanstack Query adapter

svelte-query

TanStack Query version

v4.29.14

TypeScript version

v5.0.0

Additional context

Discord discussion link

[lachlancollins]

To copy over the important context from the discord discussion:

• It seems like one of the rendering idiosyncrasies of svelte rather than svelte-query itself, or may be an issue with skeleton UI
• Every time <Pagination> remounts, it unnecessarily updates the settings variable, causing the query to refetch as that depends on settings
• This might be fixed with writable options in v5 alpha since you don't have to define the query as reactive

@ferntheplant I know this isn't exactly what you wanted, but the following works as it doesn't remount <Pagination>. Is this an acceptable solution?

<Pagination bind:settings={settings} />
{#if $query.isRefetching}
	<ProgressRadial value={undefined} />
{/if}

[ferntheplant]

@lachlancollins Yup that seems to be working ok. Also a newer version of Skeleton introduced a disabled flag to disable the buttons. Combined with a correctly rendering loading indicator this UI is sufficient. Thanks!

[lachlancollins]

Hi @ferntheplant , you might be able to implement this with stores in v5 alpha now that #5672 is merged. You'll probably need to make settings a writable store, then queryOptions a derived store. You can see more info here: https://tanstack.com/query/v5/docs/svelte/reactivity