ConvexPaginatedQuery

<script setup lang="ts">
import { api } from '#convex/api'
</script>

<template>
  <ConvexPaginatedQuery
    :query="api.tasks.paginated"
    :args="{ userId: 'user_123' }"
    :options="{ numItems: 20 }"
  >
    <template #loading>
      Loading...
    </template>

    <template #error="{ error, reset }">
      <button @click="reset">
        Retry
      </button>
      {{ error.message }}
    </template>

    <template #default="{ data, loadMore, isDone, isLoadingMore }">
      <ul>
        <li v-for="task in data" :key="task._id">
          {{ task.title }}
        </li>
      </ul>

      <button :disabled="isDone || isLoadingMore" @click="loadMore">
        Load more
      </button>
    </template>
  </ConvexPaginatedQuery>
</template>