跳转到内容
IO IO IO

无限查询（Infinite Query Store）

最小示例

Section titled “最小示例”
import { createInfiniteQueryStore } from '@iostore/svelte';


export const feed = createInfiniteQueryStore({
  key: ['feed'],
  initialPageParam: 0,
  queryFn: ({ signal, pageParam }) =>
    fetch(`/api/feed?cursor=${pageParam}`, { signal }).then((r) => r.json()),
  getNextPageParam: (lastPage) => lastPage.nextCursor ?? null,
});
<script lang="ts">
  import { feed } from './stores';


  $: rows = $feed.data?.pages.flatMap((page) => page.items) ?? [];
</script>


{#each rows as row}
  <div>{row.title}</div>
{/each}


<button disabled={!$feed.hasNextPage} on:click={() => feed.fetchNextPage()}>
  Load more
</button>

使用要点

Section titled “使用要点”
  • createInfiniteQueryStore / toInfiniteQueryStore 对应 Infinite Query 场景。
  • 通过 $feed.data.pages 渲染累计结果。
  • 建议配合 maxPages 控制内存窗口。

继续阅读

Section titled “继续阅读”

深入阅读（Query 工程）

Section titled “深入阅读（Query 工程）”