Infinite Queries for SvelteKit Remote Functions

Lightweight library to build infinite queries on top of SvelteKit Remote Functions. It wraps a remote function into paginated queries with simple state and actions.

Requirements

• SvelteKit Remote Functions enabled
• Svelte 5

Installation

npm i infinite-query

pnpm i infinite-query

Example

A minimal “Load more” list that always fetches the next page:

<script lang="ts">
  import { infiniteQuery } from 'infinite-query';
  import { getPaginatedItems } from './api.remote';

  const list = infiniteQuery(getPaginatedItems, {
    initialParam: 0,
    getInput: (page) => ({ page, perPage: 10 }),
    getNextParam: ({ param }) => { return param + 1 } // always fetch next page
  });
</script>

{#each list.queries as q}
  {#each (q.current?.items ?? []) as item}
    <div>{item.text}</div>
  {/each}
{/each}

<button disabled={!list.ready} onclick={() => list.next()}>
  Load more
</button>

See src/routes for a more advanced demo.

API

• infiniteQuery(remoteFn, options) -> instance
  • remoteFn: RemoteQueryFunction<Input, Output>
  • options:
    • initialParam: Param
    • getInput(param: Param): Input
    • getNextParam({ query, param }): Param | null
• instance:
  • properties: queries, lastQuery, lastQueryParam, firstQuery, loading, ready, error, current, hasNext
  • methods: next(), refresh()

License

MIT