[svelte-query] Re-running query on value update

[oqx]

Hey all, I'm spinning my tires out here in struggle city tonight trying to figure this out.

In React, if a parameter that is passed into useQuery changes (AKA component re-renders), it re-fetches and re-renders with new data. With svelte-query, not so much. I've tried refetch as well, but it results in another network request, regardless of whether the queryKeyshould have cache matches.

Here's a quick codesandbox I whipped up demonstrating this use case:
https://codesandbox.io/s/quirky-shamir-1949rt?file=/src/routes/todos/%2Bpage.svelte

The header links go to the following pages:

1. Todo - Changes variable, assigns query to var in a $ in order to re-run (works, but typescript doesn't like it).
2. Todo QS - Listens for variables with a reactive $, attempting to make an update.
3. Todos Refetch - Refetches on a value change. You can observe new network requests go out.

Are there patterns for achieving reactive queries that also leverage cache? Any insight @lachlancollins ?

EDIT:

For typescript, I landed on something like this where I shove everything into a custom hook:

The gotcha is, svelte doesn't re-render when response returns data from cache. So now I have to figure out how to work around that on the svelte side of things.

[oqx]

After poking at this awhile in codesandbox, declaring createQuery in a reactive declaration seems to be sufficient. Whatever issue I'm having locally isn't reproducible in codesandbox and svelte-query is working as intended.

[lachlancollins]

Hi @oqx , glad there doesn't seem to be a bug, did you manage to fix it locally? I've added some docs on reactivity here: https://tanstack.com/query/v4/docs/svelte/reactivity

[vishalbalaji]

Hi, I am contending with the same issue and am noticing that the query from a reactive statement is making a new request every time the input changes, instead of pulling from the cache. Is this the same for you?

EDIT: never mind, setting refetchOnMount to false solved this issue.

[oqx]

Hi, I am contending with the same issue and am noticing that the query from a reactive statement is making a new request every time the input changes, instead of pulling from the cache. Is this the same for you?

EDIT: never mind, setting refetchOnMount to false solved this issue.

I'll keep this in mind.

...did you manage to fix it locally?

IIRC everything is working as intended. I haven't had the opportunity to jump back in since January, but I'll be revisiting soon. Thanks for the responses and the doc updates!

[Boniqx]

Hello having the same issue with svelte 5. It seems $derived.by does not solve this case.

[nosnibor89]

This worked for me with Svelte 5 and TanStack Query 5

let sortState = $state<SortState>({
    sortBy: 'patent',
    direction: 'asc',
});

let query = $derived.by(() => createQuery({
   queryKey: ['bikes', sortState.sortBy, sortState.direction],
   queryFn: () => api.fetchBikes(sortState),
   initialData: data.bikes,
}));

[vi0cxq]

ty, worked for me