server-side-rendering - 在 Sveltekit 上获取上下文 ="module"中的页面参数

Question

如何在 context="module" 和使用 {#await load()} block 中访问页面参数 ?

如果我不使用{#await load()} block 我不会收到错误并且页面正常工作，但如果我使用Await阻止我得到这个错误:

*无法读取未定义的属性(读取“params”)*

(I have to mention that I can see the result of console.log in scripttag)
(I'm using Await block to load a spinner before completingthe content load)

这是代码:

<script context="module">
    import { gql, GraphQLClient } from 'graphql-request';

    export async function load(ctx) {
        const pageSlug = await ctx.params.slug;
        const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
            headers: {}
        });

        const getArticleQuery = gql`
            query getArticle {
                articles(filters: { Slug: { eq: "${pageSlug}" } }) {
                    data {
                        id
                        attributes {
                            Title
                            Slug
                            Content
                            FeaturedImage {
                                data {
                                    attributes {
                                        url
                                    }
                                }
                            }
                        }
                    }
                }
            }
        `;

        const data = await graphcms.request(getArticleQuery);

        if (data) {
            return {
                props: {
                    article: data.articles.data[0],
                    pageSlug: pageSlug
                }
            };
        } else {
            throw new Error(data);
        }
    }
</script>

<script>
    import { Jumper } from 'svelte-loading-spinners';
    export let article;
    export let pageSlug;
    $: console.log('pageSlug', pageSlug);
</script>

{#await load()}
        <div class="flex justify-center items-center">
            <Jumper size="60" color="#FF3E00" unit="px" duration="1s" />
        </div>
    {:then data}
        <span>{article.attributes.Title}</span>
        <span>{JSON.stringify(pageSlug)}</span>
    {:catch error}
        <p style="color: red">{error.message}</p>
{/await}

Answer 1

这不是 load 的工作方式。

load 函数在页面挂载之前运行，并将生成的 props 传递给页面。它将在您访问的第一个页面的服务器上运行，并在所有后续页面的客户端上运行。

如果您绝对需要在显示内容之前有一个加载微调器，则必须在客户端加载数据并单独加载客户端。这可以通过在 onMount 函数中加载数据来完成，但是您失去了服务器端呈现的好处。