What is the cost of recreating the query each time using $: instead of derived stores using Svelte?

[frederikhors]

Today we have Svelte docs saying that we should use the below code for reactivity:

export let intervalMs = writable(1000);

const query = createQuery(
  derived(intervalMs, ($intervalMs) => ({
    queryKey: ['refetch'],
    queryFn: async () => await fetch(endpoint).then((r) => r.json()),
    refetchInterval: $intervalMs,
  })),
)

What I'm actually using is the below instead:

export let intervalMs = 1000;

$: query = createQuery({
  queryKey: ['refetch'],
  queryFn: async () => await fetch(endpoint).then((r) => r.json()),
  refetchInterval: intervalMs,
})

which works but of course recreate the entire query every time the variable intervalMs changes.

What is the cost of recreating the query each time?

I ask this because the alternative way (the use of derived) is really inconvenient to write since there can be so many variables that could change.