如何在加载函数之外访问 SvelteKit 获取实现答案

【问题标题】：How to access SvelteKit fetch implementation outside the load function如何在加载函数之外访问 SvelteKit 获取实现
【发布时间】：2022-07-24 16:30:07
【问题描述】：

我有一个 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 提取 API 包装器 ( fetch: svelteKitFetch ) 传递给从父组件到地址组件的层次结构的每个组件，以便调用内部的端点 /endpoint.json组件本身。例如从像 [id].svelte (trought load function) 这样的页面到像 City.svelte 这样的组件到 Address.svelte

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

【问题讨论】：

标签： sveltekit

【解决方案1】：

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

如果您有一个从endpoint.json.ts 查询数据的index.svelte，请将endpoint.json.ts 重命名为index.ts，这样当您向索引页面发送POST 请求时，index.ts 中的 POST 函数将像这样运行并将数据传递到您的 Svelte 模板。

Index.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}>

index.ts

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

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

【讨论】：