I have a component that takes year as a prop and must fetch some data for that year and render based on the data.
export let year;
onMount(async()=>{
data = await fetchData(year);
})
{#each data as d}
<Child d={d}></Child>
{/each}
The prop year changes dynamically in the parent of this component (based on a dropdown). I want to fetch data every time the variable year changes.
The above code doesn't work because onMount is called only when the component is first rendered.
I tried using beforeUpdate, but that causes an infinite loop. Since the data changes inside beforeUpdate, it triggers another update.
If I try something like
$: fetchData(year)
it gives me this error
"Error: Cannot call
fetch
eagerly during server side rendering with relative URL — put yourfetch
calls insideonMount
or aload
function instead."
Is there a way to listen to changes only on the variable year and call fetch when it changes?
I fixed it by using the key logic block.
In the parent I did
{#key year}
<Component year={year}/>
{/key}
I know this doesn't entirely answer the question, but it fixes the problem. If someone knows how to actually call fetch when a prop is updated, please answer. Thank you.