Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

How to Handle Fetch Calls with Writable Stores in SvelteKit SSR without Eager Loading Warning

$
0
0

In the below snippets fetchPage($currentPage, $selectedOption); gets called on each page refresh as if that would be onMount(). I believe this is why I'm seeing following warning related to my Offers.svelte component:

Avoid calling fetch eagerly during server side rendering — put yourfetch calls inside onMount or a load function instead

I was initially thinking of movig fetchPage into load function of my +page.svelte file, but it wouldn't work because I need to use writable stores in few places in my code (not only as listed below).

Any suggestion, how could I resolve this warning?

store.ts

import { writable } from "svelte/store";export const selectedOption = writable<Option>({'filter': ''});export const currentPage = writable(1);

Pagination.svelte

<script lang="ts">    import { currentPage } from "./services/store.js";;    export let goToNextPage: () => void;</script><div class="pagination"><span>Page {$currentPage}</span><button on:click={goToNextPage} class="btn">Next</button></div>

Offers.svelte

<script lang="ts">    import { selectedOption, currentPage } from "./services/store.js";    import Pagination from "./Pagination.svelte";    import { fetchFromDB } from "./services/api.js";    let offers: Offer[] = [];    let promise: Promise<any[]> = Promise.resolve([]);    // Reactive statement to fetch data whenever currentPage or selectedOption changes    $: if ($currentPage || $selectedOption) {        fetchPage($currentPage, $selectedOption);    }    async function fetchPage(page: number, option: Option) {        const { items } = await fetchFromDB(page,option);        offers = items;    }    function goToNextPage() {        if ($currentPage < 100) {            $currentPage += 1;        }    }</script>{#await promise}    Loading{:then None}<div class="offers">    {#each offers as offer (offer.id)}                    {offer.area}                {/each}</div><Pagination {goToNextPage} />{/await}

+page.svelte

<script lang="ts">  import Offers from "$lib/Offers.svelte";</script><main><h1 class="text-3xl font-bold underline text-yellow-500">Projekt Hestia</h1><div class="card"><Offers /></div></main>

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>