Using an API with Svelte

Question

I'm having trouble fetching data from the moviedb using Svelte.

That's how I try to import the data.

<script context="module">
    export async function load({fetch}) {
        const res = await fetch(
            `https://api.themoviedb.org/3/movie/popular?api_key=<API_KEY>&language=en-US&page=1`
        );
        const data = await res.json();
        if(res.ok) {
            return {
                props: { popular: data.results }
            };
        }
    }
</script>

<script>
    export let popular;
    console.log(popular);
</script>

API output looks like this:

The Commandline was giving me errors that popular is undefined, I have no clue why and I have tried different methods of fetching the data and assigning the variable, but none worked the way is should have.

score 1 · Accepted Answer · answered Oct 01 '22 at 22:17

If you are using an up to date version of SvelteKit, load works differently:

It should be defined in a route adjacent file, e.g. +page.js or +page.server.js (depending on where the code should run)
The returned object represents the props directly (without an additional props property)
The properties returned from the load function are injected into the page as a single property called data.

See docs

Using an API with Svelte

1 Answers1