Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1879

Is this binding_property_non_reactive really correct?

$
0
0

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_reactive

Why?

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.


Viewing all articles
Browse latest Browse all 1879

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>