Tanstack Query for Svelte 5 does not rerender when adding a dependency variable about query HOT 3 OPEN

To my knowledge, Tanstack Query has yet to support Svelte 5 runes, so directly feeding $state (assuming dependencyVariable is $state) won't yield the desired results.

The Tanstack Query 5 documentation mentions you can pass options as a Svelte Store to make it reactive.
While not very ergonomic, it is workable.

Alternatives like Svelte 4 reactive statements or re-creating the query in a $effect won't work because svelte's context becomes unavailable after the component initialization is complete. (this accidentally did work in early versions of svelte 5)

To make it a bit more ergnomic you can simplify the creation of a reactive store from your runes with a function like:

const toReadable = (cb) => readable(cb(), set => $effect.pre(() => set(cb())));

and then do something like:

let dependency = $state("something");
const query = createQuery(toReadable(() => ({
  queryKey: ["Resource", dependency],
  queryFn: () => getSomething(dependency)
})));

However, note that the above example is for createQuery.
For createInfiniteQuery, it appears to be a bit trickier. You might expect something like this to work:

let dependencyVariable = writable("whatever");
let query = createInfiniteQuery(
  derived(dependencyVariable, ($dependencyVariable) => ({
    queryKey: ["Resource", $dependencyVariable],
    queryFn: async ({ pageParam }) => {
      // Implementation omitted for brevity
    },
    getNextPageParam(lastPage) {
      // Implementation omitted for brevity
    },
    initialPageParam: null as string | null | undefined,
    initialDataUpdatedAt: () => Date.now(),
  }))
);

However, this gives me a lot of type errors, suggesting it is not the way to do it.

An additional example in the documentation specifically demonstrating how to use createInfiniteQuery reactively would be very helpful.

from query.

I have the same issue, I would expect infinite query to refetch page 0 with different parameters (or do anything at all) when part of the array key changes, as a temporary workaround I am using:

enabled: false

and manually triggering refetch in a reactive statement

$postQuery.refetch({ refetchPage: 0 });

from query.

I have added an example code below

Please show a minimal reproduction with codesandbox or stackblitz

from query.