xenial-black

`isRefetching` is always true

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}

<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?

5 Replies

causal-orange•3y ago

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

xenial-blackOP•3y ago

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

GitHub - ferntheplant/tanstack-repro: Reproduce issue with tanstack...

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

causal-orange•3y ago

Yeah, this is funky - can you post an issue on https://github.com/TanStack/query/issues ? 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?

xenial-blackOP•3y ago

Done: https://github.com/TanStack/query/issues/5603

GitHub

Svelte-Query reactive createQuery refetches despite key values no...

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 se...

xenial-blackOP•3y ago

yea i confirmed via console logs that the paginator is re-mounting every time isRefetching goes to false and that my reactive statements on paginationSettings are re-running because the object is set again despite the key/values not changing. This might be a thing about bind:settings like you mentioned. I could use events instead of binding settings to get updates to the offset value and see how that goes

Gaming

Programming

`isRefetching` is always true

Did you find this page helpful?