SvelteKit+Sanity集成：__layout.svelte与lib文件无法获取GROQ结果

方案1：在布局文件对应的load函数中查询数据 #

SvelteKit里页面的get（旧版）或load（新版）函数返回的数据仅作用于当前页面。要让__layout.svelte拿到数据，需在布局对应的__layout.js（或__layout.server.js，需要服务器端查询时用）中编写查询逻辑：

// __layout.js
import client from '$lib/sanityClient'; // 替换为你的Sanity客户端路径

export async function load() {
  const settings = await client.fetch(/* groq */ `*[_type == "siteSettings"][0]`);
  return { settings };
}

接着在__layout.svelte中接收数据：

<script>
  export let settings;
</script>

<!-- 直接使用settings数据 -->
<footer>{settings?.footerText}</footer>

<!-- 子页面插槽 -->
<slot />

所有子页面也能通过export let settings直接获取该数据，无需重复查询。

方案2：封装公共查询函数，在组件中直接调用 #

如果需要在独立组件（比如libs/Footer.svelte）中获取数据，可把查询逻辑封装成公共函数：

// lib/sanityQueries.js
import client from './sanityClient';

export async function getSiteSettings() {
  return client.fetch(/* groq */ `*[_type == "siteSettings"][0]`);
}

在客户端组件中结合onMount处理异步：

<!-- libs/Footer.svelte -->
<script>
  import { onMount } from 'svelte';
  import { getSiteSettings } from '$lib/sanityQueries';

  let settings = null;

  onMount(async () => {
    settings = await getSiteSettings();
  });
</script>

{#if settings}
  <footer>{settings.footerText}</footer>
{/if}

如果是服务器端组件（SvelteKit 1.0+），可直接在脚本中使用await：

<script>
  import { getSiteSettings } from '$lib/sanityQueries';
  const settings = await getSiteSettings();
</script>

<footer>{settings.footerText}</footer>

方案3：使用Svelte Store共享全局数据 #

若需在多个组件间共享数据，可借助Svelte的store：

// lib/stores.js
import { writable } from 'svelte/store';
import client from './sanityClient';

export const siteSettings = writable(null);

// 初始化数据的函数
export async function loadSiteSettings() {
  const data = await client.fetch(/* groq */ `*[_type == "siteSettings"][0]`);
  siteSettings.set(data);
}

在__layout.js中触发初始化：

// __layout.js
import { loadSiteSettings } from '$lib/stores';

export async function load() {
  await loadSiteSettings();
  return {};
}

在任意组件（布局或Footer）中使用：

<!-- __layout.svelte 或 libs/Footer.svelte -->
<script>
  import { siteSettings } from '$lib/stores';
</script>

{#if $siteSettings}
  <footer>{$siteSettings.footerText}</footer>
{/if}

内容的提问来源于stack exchange，提问作者aflxbatmobile