Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

[svelte] Why can't I bind to a `createQuery` result?

Abierto
  • ¿Algo no está bien?
#9,824 2 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Activo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza con el playground de Svelte enlazado y reproduce la advertencia usando los ejemplos Player.svelte, FormPlayers.svelte y FormPlayerSkill.svelte del informe. Lee la guía de Svelte sobre binding_property_non_reactive junto con el comportamiento de $derived y $bindable, y después compara cómo se expone el resultado de TanStack Svelte Query. Se considerará terminado cuando se haya establecido por qué este binding no es reactivo y se haya documentado o confirmado el comportamiento compatible.

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

Descripción

package: svelte-query
Describe the bug

Using Svelte (v5.42.3) and Svelte Kit (v2.48.2) and @tanstack/svelte-query (v6.0.3).

If I have the component Player.svelte:

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

    const playerStore = createQuery(() => ({
        queryKey: "key",
        queryFn: playerById(page.params.player_id),
    }));

    let { data: player } = $derived(playerStore);
</script>

<FormPlayers bind:player={player} />

and FormPlayers.svelte:

<script lang="ts">
    type Props = {
        player: Player;
    };

    let {
        player = $bindable(),
    }: Props = $props();
</script>

{#each player.skills as skill, index (skill.id)}
    <FormPlayerSkill bind:skill={player.skills[index]} />
{/each}

and FormPlayerSkill.svelte:

<script lang="ts">
    type Props = {
        skill: PlayerSkillInput;
    };

    let {
        skill = $bindable()
    }: Props = $props();
</script>

<Date bind:date={skill.date} />

I get the error:

FormPlayers.svelte:77 [svelte] binding_property_non_reactive
`bind:skill={player.skills[index]}` (src/routes/players/FormPlayers.svelte:40:4) is binding to a non-reactive property
https://svelte.dev/e/binding_property_non_reactive

Why? Isn't the let { data: player } = $derived(playerStore) assignable / bindable / editable / "Sveltable"?

Your minimal, reproducible example

I'll post ASAP (it's not easy).

Tanstack Query adapter

svelte-query

TanStack Query version

6.0.3

TypeScript version

5.9.3

Lenguaje dominante
TypeScript
Estrellas
50.4k
Forks
4.2k
Merge medio
14 h 34 min
PR fusionados (30 d)
332

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.