SSR 和 SvelteKit
设置
SvelteKit 默认使用 SSR 渲染路由。因此，您需要禁用服务器上的查询。否则，您的查询将继续在服务器上异步执行，即使 HTML 已发送到客户端。
实现此目的的推荐方法是使用 SvelteKit 的 browser 模块，在您的 QueryClient 对象中。这不会禁用 queryClient.prefetchQuery()，后者在下面的解决方案之一中使用。
src/routes/+layout.svelte
svelte
<script lang="ts">
import { browser } from '$app/environment'
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
enabled: browser,
},
},
})
</script>
<QueryClientProvider client={queryClient}>
<slot />
</QueryClientProvider>
<script lang="ts">
import { browser } from '$app/environment'
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
const queryClient = new QueryClient({
defaultOptions: {
queries: {
enabled: browser,
},
},
})
</script>
<QueryClientProvider client={queryClient}>
<slot />
</QueryClientProvider>
预取数据
Svelte Query 支持两种在服务器上预取数据并将其传递给客户端的方法，适用于 SvelteKit。
如果您想查看理想的 SSR 设置，请参阅 SSR 示例。
使用 initialData
结合 SvelteKit 的 load 函数，您可以将服务器端加载的数据传递给 createQuery 的 initialData 选项。
src/routes/+page.ts
ts
export async function load() {
const posts = await getPosts()
return { posts }
}
export async function load() {
const posts = await getPosts()
return { posts }
}
src/routes/+page.svelte
svelte
<script>
import { createQuery } from '@tanstack/svelte-query'
import type { PageData } from './$types'
export let data: PageData
const query = createQuery({
queryKey: ['posts'],
queryFn: getPosts,
initialData: data.posts,
})
</script>
<script>
import { createQuery } from '@tanstack/svelte-query'
import type { PageData } from './$types'
export let data: PageData
const query = createQuery({
queryKey: ['posts'],
queryFn: getPosts,
initialData: data.posts,
})
</script>
优点
- 此设置是最简化的，对于某些情况可以作为快速解决方案。
- 适用于 +page.ts/+layout.ts 和 +page.server.ts/+layout.server.ts 的 load 函数。
缺点
- 如果您在组件树深处调用 createQuery，您需要将 initialData 传递到该位置。
- 如果您在多个位置使用相同的查询调用 createQuery，您需要将 initialData 传递给所有这些地方。
- 无法知道查询是在何时在服务器上获取的，因此 dataUpdatedAt 和确定查询是否需要重新获取是基于页面加载时间而不是实际获取时间。
使用 prefetchQuery
Svelte Query 支持在服务器上预取查询。使用下面的设置，您可以在将数据发送到用户浏览器之前，获取数据并将其传递给 QueryClientProvider。因此，这些数据已经存在于缓存中，客户端不会发生初始获取。
src/routes/+layout.ts
ts
import { browser } from '$app/environment'
import { QueryClient } from '@tanstack/svelte-query'
export async function load() {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
enabled: browser,
},
},
})
return { queryClient }
}
import { browser } from '$app/environment'
import { QueryClient } from '@tanstack/svelte-query'
export async function load() {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
enabled: browser,
},
},
})
return { queryClient }
}
src/routes/+layout.svelte
svelte
<script lang="ts">
import { QueryClientProvider } from '@tanstack/svelte-query'
import type { LayoutData } from './$types'
export let data: LayoutData
</script>
<QueryClientProvider client={data.queryClient}>
<slot />
</QueryClientProvider>
<script lang="ts">
import { QueryClientProvider } from '@tanstack/svelte-query'
import type { LayoutData } from './$types'
export let data: LayoutData
</script>
<QueryClientProvider client={data.queryClient}>
<slot />
</QueryClientProvider>
src/routes/+page.ts
ts
export async function load({ parent, fetch }) {
const { queryClient } = await parent()
// You need to use the SvelteKit fetch function here
await queryClient.prefetchQuery({
queryKey: ['posts'],
queryFn: async () => (await fetch('/api/posts')).json(),
})
}
export async function load({ parent, fetch }) {
const { queryClient } = await parent()
// You need to use the SvelteKit fetch function here
await queryClient.prefetchQuery({
queryKey: ['posts'],
queryFn: async () => (await fetch('/api/posts')).json(),
})
}
src/routes/+page.svelte
svelte
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
// This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
const query = createQuery({
queryKey: ['posts'],
queryFn: async () => (await fetch('/api/posts')).json(),
})
</script>
<script lang="ts">
import { createQuery } from '@tanstack/svelte-query'
// This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
const query = createQuery({
queryKey: ['posts'],
queryFn: async () => (await fetch('/api/posts')).json(),
})
</script>
优点
- 服务器加载的数据可以在任何地方访问，无需逐级传递 props。
- 一旦页面渲染完成，客户端就不会发生初始获取，因为查询缓存保留了关于所执行查询的所有信息，包括 dataUpdatedAt。
缺点
- 需要更多文件才能进行初始设置。
- 不适用于 +page.server.ts/+layout.server.ts 的 load 函数（然而，与 TanStack Query 一起使用的 API 无论如何都需要完全暴露给浏览器）。
