Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

349
Vistas
Calling Endpoint from script fails with TypeError [ERR_INVALID_URL]: Invalid URL

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)

7 months ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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.

7 months ago · Juan Pablo Isaza Denunciar

0

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);}}
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos