Svelte reactivity is cloning my queries

[TQuantab]

Hi there :)

im currently trying to get my code to become reactive, but sadly it duplicates queries, instead of updating them.

This is my code:

    let createNewOrg = $derived(getUrlParam('create') === 'true' || false);
    const enabled = $derived(!createNewOrg);

    const { data, isLoading, isError } = createQuery(() => ({
        queryKey: ['organisations', enabled],
        queryFn: enabled ? async () => {
            console.log(enabled);
            const ctx = useClerkContext();
            if(!ctx.session) throw new Error('No session found');
            let token = await ctx.session.getToken();

            const res = await fetch(`${PUBLIC_API_PATH}/org/find`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            if (!res.ok) throw new Error('Failed to fetch posts');

            return res.json();
        } : skipToken
    }));

For some reason, instead of updating my existing query, when "enabled" changes, it instead creates a new query (according to chrome dev tools).

Anybody got any idea?

[zisam-glitch]

The issue occurs because enabled is included inside your queryKey:

queryKey: ['organisations', enabled], // ❌ Causes cache identity to change on toggle

In TanStack Query, the queryKey serves as the unique identifier for queries in the QueryCache.

Root Cause Diagnosis

1. Cache key identity mismatch: When enabled is false, the cache key is serialized as ['organisations', false]. When enabled toggles to true, the cache key becomes ['organisations', true].
2. New query instantiation: Because TanStack Query hashes the query key to locate entries in its internal cache, ['organisations', false] and ['organisations', true] are treated as two distinct, unrelated queries.
3. What DevTools shows: When enabled flips to true, TanStack Query creates a brand new query instance for ['organisations', true]. The old query (['organisations', false]) remains stored in the cache in an inactive state until its gcTime expires. That is why you see duplicate/cloned queries in Chrome DevTools instead of the existing query updating.

The queryKey should only identify the resource being requested (in this case, ['organisations']), not whether the component currently wants to fetch it.

---

Solution

Keep your queryKey constant as ['organisations'], and control query execution using either the enabled option or skipToken.

Option 1: Use the enabled option (Recommended)

Keep the query key stable and supply enabled as an option. In Svelte 5 with @tanstack/svelte-query (v5), the getter function () => ({ ... }) automatically re-runs reactively when $derived signals update:

<script>
  import { createQuery } from '@tanstack/svelte-query';

  let createNewOrg = $derived(getUrlParam('create') === 'true');
  const enabled = $derived(!createNewOrg);

  const query = createQuery(() => ({
    queryKey: ['organisations'], // Stable query key identifying the resource
    enabled: enabled,           // Toggles fetching without changing cache identity
    queryFn: async () => {
      const ctx = useClerkContext();
      if (!ctx.session) throw new Error('No session found');
      const token = await ctx.session.getToken();

      const res = await fetch(`${PUBLIC_API_PATH}/org/find`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      if (!res.ok) throw new Error('Failed to fetch organisations');
      return res.json();
    },
  }));
</script>

{#if query.isLoading}
  <p>Loading organisations...</p>
{:else if query.isError}
  <p>Error: {query.error?.message}</p>
{:else if query.data}
  <ul>
    {#each query.data as org}
      <li>{org.name}</li>
    {/each}
  </ul>
{/if}

Option 2: Use skipToken (v5 Type-Safe Pattern)

If you prefer using TanStack Query v5's skipToken, keep the queryKey stable and conditionally pass skipToken as the queryFn:

<script>
  import { createQuery, skipToken } from '@tanstack/svelte-query';

  let createNewOrg = $derived(getUrlParam('create') === 'true');
  const enabled = $derived(!createNewOrg);

  const query = createQuery(() => ({
    queryKey: ['organisations'], // Stable key
    queryFn: enabled
      ? async () => {
          const ctx = useClerkContext();
          if (!ctx.session) throw new Error('No session found');
          const token = await ctx.session.getToken();

          const res = await fetch(`${PUBLIC_API_PATH}/org/find`, {
            headers: {
              Authorization: `Bearer ${token}`,
            },
          });

          if (!res.ok) throw new Error('Failed to fetch organisations');
          return res.json();
        }
      : skipToken,
  }));
</script>

---

Svelte 5 Reactivity Tip

In Svelte 5, avoid destructuring createQuery at top-level initialization:

// ⚠️ Destructuring at creation time can break reactive property tracking in Svelte 5
const { data, isLoading, isError } = createQuery(() => ({ ... }));

Instead, access the properties directly from the returned object (e.g. query.data, query.isLoading, query.isError) so Svelte 5's reactivity system accurately tracks property reads.