概览
@tanstack/svelte-query 包提供了一级 API，用于在 Svelte 中使用 TanStack Query。
例子
在项目的根文件中(如: src/index.svelte)导入QueryClientProvider:
Markdown
1<script lang="ts">2 import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'3 import Example from './lib/Example.svelte'4 5 const queryClient = new QueryClient()6</script>7 8<QueryClientProvider client={queryClient}>9 <Example />10</QueryClientProvider>然后便可以从任意组件中导入你需要的函数(如: createQuery):
Markdown
1<script lang="ts">2 import { createQuery } from '@tanstack/svelte-query'3 4 const query = createQuery({5 queryKey: ['todos'],6 queryFn: () => fetchTodos(),7 })8</script>910<div>11 {#if $query.isLoading}12 <p>加载中...</p>13 {:else if $query.isError}14 <p>错误: {$query.error.message}</p>15 {:else if $query.isSuccess}16 {#each $query.data as todo}17 <p>{todo.title}</p>18 {/each}19 {/if}20</div>SvelteKit
如果你使用了 SvelteKit，请参阅 SSR & SvelteKit.
可用的函数
Svelte Query 提供了一些有用的原语及函数，使得在 Svelte 中操作并管理服务器状态变得非常容易。
createQuerycreateQueriescreateInfiniteQuerycreateMutationuseQueryClientuseIsFetchinguseIsMutatinguseHydrate<QueryClientProvider><Hydrate>
Svelte Query & React Query 之间的主要差异
Svelte Query 提供了一个与 React Query 类似的 API，但有一些关键的区别需要注意。
- Svelte Query 有部分函数的返回值会返回 Svelte Store 形式。为了使这些返回值具有响应式的特点，你可能需要为返回的 store 加上
$前缀。原因情看 Svelte 的官方文章。 - 如果你的查询或修改依赖了变量，你必须保证这个变量是响应式的。原因请看 Svelte 的响应式部分