如何在加载函数之外访问 SvelteKit fetch 实现

Question

我有一个 SvelteKit 客户端，它通过 GRAPHQL API 接口与后端进行通信。SvelteKit 应用程序只有一个独立端点，仅通过一个 POST 请求处理程序运行请求，例如 /src/routes/endpoint.json.ts

我有一个模块，比如 Address.svelte，它公开了一个 smui 自动完成小部件来搜索我所在国家/地区的城市。当用户输入该组件时，该组件会动态地获取城市，如下所示：

   [..] 
   import {findListCity, type ICity } from '$lib/city'
   export let svelteKitFetch
   [...]
   
   async function searchCities(input: string): Promise<ICity[] | false> {
        
            [...]

            return new Promise( ( resolve, reject) => {

                debounceSearchTimer = setTimeout( async () => {
                    try {
                        options = await findCityList({ 
                            fetch: svelteKitFetch, 
                            pagination: { ... },
                            searchOptions: {... } 
                        }); 
                    } catch(e) {
                        console.log("An error occurred ", e);
                        reject(e);
                    }

                    // Return a list of matches.
                    const result ...
                                        
                    resolve(result);

                }, delay || 750 ); 
            });
    }

我想强调的问题要点如下：

我必须将 SvelteKit fetch API 包装器 ( fetch: svelteKitFetch ) 传递到从父组件到 Address 组件的层次结构中的每个组件，以调用组件本身内部的端点 /endpoint.json 。例如，从像 [id].svelte 这样的页面（通过加载函数）到像 City.svelte 这样的组件到 Address.svelte

有没有更好的方法来做到这一点，不那么麻烦？有没有办法从父页面加载函数外部访问获取包装器？

Answer 1

我相信Page enpoint是适合您的用例的最佳方式。

如果您有一个index.svelte来自 的查询数据endpoint.json.ts，请将 重命名endpoint.json.ts为index.ts，以便当您POST向索引页面发送请求时，您的 POST 函数index.ts将运行并将数据传递到您的 Svelte 模板，如下所示。

索引.svelte

<script>
    let searchTerms: string = ""

    const searchCities = async ()=>{
        if (searchTerms.length == 0) return

        // because you didn't specify the fetch path,
        // the post request will be sent to the current page
        // which will run your page endpoint post function

        const req = fetch('', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', 
                Accept: 'application/json'
            },
            body: JSON.stringify({searchTerms})
        })
        const results = await req.json()
        // do something with the results
    }
    
</script>

<input type="text" bind:value={searchTerms} on:input={searchCities}>

索引.ts

export const POST: RequestHandler = async ({ request }) => {
    const { searchTerms } = await request.json()

    // query your database
    const results = []
    return {
        status: 200,
        body: {
            results
        }
    }
}