Sveltekit: невозможно быстро вызвать fetch во время рендеринга на стороне сервера с относительным URL-адресом

Я борюсь с ошибкой при попытке составить таблицу бесконечной прокрутки.

Он работает нормально, пока я не обновлю страницу, а затем получаю ошибку «Невозможно вызвать fetch во время рендеринга на стороне сервера с относительным URL-адресом (/api/clients/getClients) — вместо этого поместите вызовы fetch внутри onMount или функции load»

Кажется, я не могу найти никакой документации, которая разъясняла бы, что это означает в этом контексте и что может измениться при перезагрузке страницы?

<script lang = "ts">
    import {onMount, onDestroy} from "svelte";  

    import { goto } from '$app/navigation';
    import { page } from '$app/stores';
    
    import Table from '$lib/component/table/Table.svelte';



    // Data
    $:client_type = $page.params.type;
    let limit:number = 30;
    let offset:number = 0;
    $:search = "";

    let headers: any = [];
    let data:any = [];

    let newBatch:any = [];
    let noMore:boolean = false;
    
    async function fetchData() {
        
        const response = await fetch('/api/clients/getClients', {
            method: 'POST',
            headers: {'Content-Type': 'application/json',},
            body: JSON.stringify({ 'client_type': client_type, 'limit': limit, 'offset': offset, 'search': search })
        });
        let result = await response.json(); 
        headers = result.headers;
        newBatch = result.content;

        newBatch.length < limit ? noMore = true : noMore = false;
    };

    onMount(()=> {
        fetchData();
    })

    $: data = [
        ...data,
        ...newBatch
    ];    

    $: onChange(client_type, search);
    function onChange(client_type:string, search:string) {
        data = [];
        newBatch= [];
        offset = 0;
        noMore = false;
        fetchData();
    }


    // Infinite Scroll
    $:y = 0;
    $:h = 0;
    function handleScroll() {
        if (y > (h)) {
            h = h*2;
            offset = offset+limit;
            if (!noMore) {
                fetchData();
            }
        }
    }  


    // Click on Row
    function handleClick(event:CustomEvent) {
        goto('/client/'+event.detail.id.data);
    }
</script>



<svelte:window bind:scrollY = {y} bind:innerHeight = {h} on:scroll = {handleScroll} />

<main>
{#key client_type || search}
    <Table headers = {headers} content = {data} on:clickRow = {handleClick} />
{/key}
</main>

🤔 А знаете ли вы, что...
Svelte предоставляет интуитивный синтаксис для создания компонентов и отслеживания состояния.


85
1

Ответ:

Решено

Когда веб-браузер получает первую страницу с сервера SvelteKit (как это происходит при перезагрузке страницы в веб-браузере), сервер запустит ваш SPA на сервере, получит обработанный HTML-код и отправит его в веб-браузер. , чтобы веб-браузер мог быстро получить и отобразить HTML-код. Затем веб-браузер начнет запускать SPA, и с этого момента он продолжит работать как SPA на клиенте.

В вашем случае ваш компонент немедленно вызывает onChange(), который затем, в свою очередь, вызывает fetchData(), который затем, в свою очередь, вызывает fetch(). На это жалуется сервер. Вместо этого вам следует использовать функцию load().