Tanstack Query for Svelte 5 does not rerender when adding a dependency variable

[Boniqx]

Describe the bug

Issue Description:

Problem:
When utilizing the createInfiniteQuery client to manage infinite queries, there is an issue with updating the query despite the addition of a dependency variable in the query key.

Steps to Reproduce:

Initialize a query using createInfiniteQuery.
Define a queryKey that includes generic variables.
Implement the queryFn function to handle data retrieval based on certain conditions.
Attempt to update the query based on changes in the dependency variable within the queryKey.

Actual Behavior:
Despite adding the dependency variable to the queryKey, the query does not update as expected when the variable changes.

Code Snippet:

javascript

let query = createInfiniteQuery({
  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(),
});

Environment:

Framework/Libraries: SVELTE 5
Possible Solutions:

Review the implementation of createInfiniteQuery to ensure proper handling of dependency variables.
Check for any inconsistencies or errors in the query key setup.
Consider alternative approaches for managing infinite queries that may better accommodate dynamic updates.

Your minimal, reproducible example

I have added an example code below

Steps to reproduce

Steps to Reproduce:

Initialize a query using createInfiniteQuery.
Define a queryKey that includes generic variables.
Implement the queryFn function to handle data retrieval based on certain conditions.
Attempt to update the query based on changes in the dependency variable within the queryKey.
Expected Behavior:
The query should update accordingly when there are changes in the dependency variable included in the queryKey.

Expected behavior

Expected Behavior:
The query should update accordingly when there are changes in the dependency variable included in the queryKey.

How often does this bug happen?

Every time

Screenshots or Videos

test

Platform

Any platform

Tanstack Query adapter

None

TanStack Query version

@tanstack/svelte-query

TypeScript version

5.4.3

Additional context

Additional Context:
This issue impacts the ability to dynamically update queries based on changing dependency variables, hindering the functionality of the application.

[halafi]

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 });

[TkDodo]

I have added an example code below

Please show a minimal reproduction with codesandbox or stackblitz

[nicksulkers]

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.

[frederikhors]

Can you please create a stackblitz reproduction?