[svelte-query] A result key first read after the query settled stays stale: the component's copy refreshes only on a change of an already-tracked key

Abierto
  • ¿Algo no está bien?
#12,485 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@lazerg ya está trabajando en esto.

Desde el 1/11/2026.

  • #12487 de @lazerg — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
20/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Start with observer.trackResult(result) in createBaseQuery.svelte.js around line 29, then the #trackedProps check in queryObserver.js around lines 395-403, and the onPropTracked hook. Check the linked pull request #12487 first, since it already targets this bug. Done means the minimal case shows a b after about 300 ms, with a test that reads a key for the first time after the query has settled.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Versions: @tanstack/svelte-query 6.3.1, @tanstack/query-core 5.104.1, Svelte 5.

What happens

When notifyOnChangeProps is unset, createBaseQuery wraps the result in observer.trackResult(result) (createBaseQuery.svelte.js:29). QueryObserver.updateResult then notifies only when a key in #trackedProps changes (queryObserver.js:395-403).

The observer does add a key to its tracked set when a template first reads it. But the component's reactive copy is updated only through those notifications. If a query settles while the template has read only some of its keys, the update is skipped and the component keeps its copy of the old result. A key that the template reads later is then read from that stale copy, and nothing updates it again, because the query has already settled.

Minimal case

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

  const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
  const a = createQuery(() => ({ queryKey: ['a'], queryFn: () => wait(300).then(() => 'a') }));
  const b = createQuery(() => ({ queryKey: ['b'], queryFn: () => Promise.resolve('b') }));
</script>

{#if a.isError || b.isError}
  <p>error</p>
{:else if a.data === undefined || b.data === undefined}
  <p>loading</p>
{:else}
  <p>{a.data} {b.data}</p>
{/if}

Expected: a b after about 300 ms.

Actual: loading stays forever. b settles first, while the template has read only b.isError, because the || short-circuits before b.data. The change to b.data doesn't notify, so the component's copy of b keeps data: undefined. When a settles, the template reads b.data from that stale copy.

Workaround

Set notifyOnChangeProps: 'all' in the client's default query options, or read every key before branching.

Suggestion

Pass onPropTracked to trackResult and refresh the component's copy when a key is first tracked, or skip tracking in the Svelte adapter, since Svelte already re-renders key by key.

Lenguaje dominante
TypeScript
Estrellas
50.5k
Forks
4.2k
Merge medio
11 h 2 min
PR fusionados (30 d)
524

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/query

Todos los issues de TanStack/query

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.