#`isRefetching` is always true

8 messages · Page 1 of 1 (latest)

graceful topaz
#

In SvelteKit I'm trying to set up a traditional paginated table and disable the pagination controls while loading a new page. I'm doing something like the following:

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

  let limit = 5
  let offset = 0

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

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

Without the if $query.isRefetching everything works fine but once I add this check the loading spinner is always shown. When I first load the page the pagination controls show for a split second but then the loading spinner comes back. Am I misunderstanding how isRefetching works?

lucid tapir
#

@graceful topaz are you using v4 or v5? Can you post a repro in a GitHub issue?

graceful topaz
#

sorry for the delay was busy but here's a repro https://github.com/ferntheplant/tanstack-repro

Once the query finished refetching it would render my paginator which ended up setting limit and offset again to the same value causing the query to refetch despite the key not changing. My original goal was to disable the paginator when a query is loading

GitHub

Reproduce issue with tanstack query. Contribute to ferntheplant/tanstack-repro development by creating an account on GitHub.

lucid tapir
#

It seems like one of the rendering idiosyncrasies of svelte rather than svelte-query itself, but I'd like to get a few more eyes on it

#

I'll also have a look at the skeleton ui package (note replacing bind:settings with settings stops the rerendering, so you might be right that the paginator is unnecessarily re-writing to settings)

#

And I'm not sure if createInfiniteQuery would work in this situation?

graceful topaz