How to include API response in component within pre-rendered pages?

[benaltair]

Hey everyone - I have an optimization question. I'm trying to fetch an API response at build, then use it during the pre-render process.

Currently I'm calling the API in __layout.svelte

api.getSingle('navigation', {}).then((document) => {
  // Set `navigation` store
});

Then using that store in my Header.svelte component:

<script lang="ts">
  import navigationItems from '$lib/stores/navigation';
</script>

<nav>
  {#each navigationItems as item}
    <!-- Items in HTML here -->
  {/each}
</nav>

Right now that only pre-renders

<nav>
</nav>

And then it fetches the API request client-side during hydration. How do I get the component to be included in the pre-render with the navigation data fetched at build?

[benaltair]

As suggested by PM on Discord the API call should happen within load() for the __layout file to be included in the pre-rendered files. I've now removed the store altogether, and passed down a prop from __layout to the Header component with the appropriate data.