Tengo esta sección de script:
<script> import Search from "$lib/search.svelte"; import ViewOptions from "$lib/views.svelte"; import { onMount } from "svelte"; let page; let showData = { shows: {}, loading: true, }; export async function getData(page) { const url = `/shows?page=${page}`; console.log(url); const res = await fetch(url); const shows = await res.json(); showData = { shows: shows, loading: false, }; } onMount(async () => { getData(page); }); $: page, getData(page); </script>y onMount funciona bien. si trato de hacerlo reactivo, lo que significa llamar a la función cada vez que cambia la variable de página, aparece este error en la consola:
node:internal/errors:464 ErrorCaptureStackTrace(err); ^ TypeError [ERR_INVALID_URL]: Invalid URL at new NodeError (node:internal/errors:371:5) at onParseError (node:internal/url:552:9) at new URL (node:internal/url:628:5) at new Request (file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:5907:16) at file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6189:19 at new Promise (<anonymous>) at fetch (file:///.../node_modules/@sveltejs/kit/dist/install-fetch.js:6187:9) at getData (/src/routes/index.svelte:23:21) at eval (/src/routes/index.svelte:37:10) at Object.$$render (/.../node_modules/svelte/internal/index.js:1745:22) { input: '/shows?page=undefined', code: 'ERR_INVALID_URL' }No entiendo que la llamada a la función funcione perfectamente en la sección onMount, pero no cuando se llama directamente. Parece que no puede encontrar el punto final. Lo entendería si lo llamo desde el servidor (sección de módulo) pero claramente, ¡no lo hago!
PD: también probé con $: getData(page)
SvelteKit proporciona una función de load con un contenedor de fetch que puede usar para llamar a sus API internas. Refactoriza tu código para usarlo. Deberías terminar con algo como:
<script context="module"> export async function load({ fetch }) { const res = await fetch(`/shows?page=${page}`); const shows = await res.json(); return { props: { shows } }; } </script>Después de lo que puedes hacer:
<script context="module"> /* Code above */ </script> <script> export let shows; </script> Y los shows se hidratarán con datos del servidor.
El problema aquí es que la función de carga se evalúa tanto en el cliente como en el servidor. En la declaración reactiva, debe verificar si actualmente se ejecuta en el navegador de esta manera:
$: {if (browser) {getData(page);}}