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 insideonMount
or aload
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>