use-infinite-query.md

title
useInfiniteQuery

{{ $frontmatter.title }}

The useInfiniteQuery method allows you to use the original useInfiniteQuery

• The result is the same as the original function.
• The queryKey is [method, path, params].
• data and error are fully typed.
• You can pass infinite query options as fourth parameter.

::: tip You can find more information about useInfiniteQuery on the @tanstack/vue-query documentation. :::

Example

::: code-group

<script setup lang="ts">
import { $api } from "./api";
const { data, error, fetchNextPage, hasNextPage, isFetching, isError, isFetchingNextPage } = $api.useInfiniteQuery(
  "get",
  "/posts",
  {
    params: {
      query: {
        limit: 10,
      },
    },
  },
  {
    getNextPageParam: (lastPage) => lastPage.nextPage,
    initialPageParam: 0,
  },
);
</script>

<template>
  <span v-if="isFetching">Loading...</span>
  <span v-else-if="isError">Error: {{ error?.message }}</span>
  <div v-else-if="data">
    <span v-if="isFetching && !isFetchingNextPage">Fetching...</span>
    <ul v-for="(group, index) in data.pages" :key="index">
      <li v-for="post in group.posts" :key="post.id">
        {{ post.name }}
      </li>
    </ul>
    <button
      @click="() => fetchNextPage()"
      :disabled="!hasNextPage || isFetchingNextPage"
    >
      <span v-if="isFetchingNextPage">Loading more...</span>
      <span v-else-if="hasNextPage">Load More</span>
      <span v-else>Nothing more to load</span>
    </button>
  </div>
</template>

import createFetchClient from "openapi-fetch";
import createClient from "openapi-vue-query";
import type { paths } from "./my-openapi-3-schema"; // generated by openapi-typescript

const fetchClient = createFetchClient<paths>({
  baseUrl: "https://myapi.dev/v1/",
});
export const $api = createClient(fetchClient);

:::

Api

const query = $api.useInfiniteQuery(
  method,
  path,
  options,
  infiniteQueryOptions,
  queryClient
);

Arguments

• method (required)
  • The HTTP method to use for the request.
  • The method is used as key. See Query Keys for more information.
• path (required)
  • The pathname to use for the request.
  • Must be an available path for the given method in your schema.
  • The pathname is used as key. See Query Keys for more information.
• options
  • The fetch options to use for the request.
  • Only required if the OpenApi schema requires parameters.
  • The options params are used as key. See Query Keys for more information.
• infiniteQueryOptions
  • The original useInfiniteQuery options.
  • See more information
• queryClient
  • The original queryClient option.
  • See more information