Reproduction
https://svelte.dev/playground/2c859a9c620b4b9a8422c2596df4c209?version=5.42.3
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 propertyhttps://svelte.dev/e/binding_property_non_reactiveWhy?
Isn't the let { data: player } = $derived(playerStore) assignable / bindable / editable / "Sveltable"?
I need to use let {data: player} = $derived(playerStore) because the queryFn can be async and can take some time to load or to refetch itself with new data.