I have this script section:
<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>
and the onMount works just fine. if i try to make it reactive, meaning to call the function whenever the page variable changes, i get this error in the console:
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'
}
I don't understand that the function call works perfectly in the onMount section, but doesn't when called directly. It looks like it cannot find the endpoint. I would understand if i call it from the server (module-section) but clearly, i do not!
P.S.: I also tried with $: getData(page)
SvelteKit provides a load function with a fetch wrapper you can use to call your internal APIs. Refactor your code to use it. You should end up with something like:
<script context="module">
export async function load({ fetch }) {
const res = await fetch(`/shows?page=${page}`);
const shows = await res.json();
return {
props: { shows }
};
}
</script>
After than you can do:
<script context="module">
/* Code above */
</script>
<script>
export let shows;
</script>
And shows will be hydrated with data from the server.
The problem here is, that load function is evaluated both on the client and the server. In the reactive statement you have to check, if it's currently run on the browser like so:
$: {if (browser) {getData(page);}}