useSuspenseInfiniteQuery(...)

The Hook enables you to perform asynchronous data fetching operations with support for infinite scrolling scenarios. The functionality is similar to the useInfiniteQuery hook, but with the added benefit of Suspense support. For more detailed information, explore useSuspenseInfiniteQuery(...) 🌴 documentation for more details.

const query = qraft.<service>.<operation>.useSuspenseInfiniteQuery(
  parameters,
  suspenseInfiniteQueryOptions,
  queryClient,
)

Arguments

1. parameters: { path, query, header } | QueryKey | {}

   • Required and strictly-typed ✨ parameters for the query
   • parameters will be used to generate the QueryKey
   • Instead of an object with {path, query, header}, you can pass a QueryKey as an array which is also strictly-typed ✨
   • If operation does not require parameters, you must pass an empty object {} for strictness

2. suspenseInfiniteQueryOptions?: UseSuspenseInfiniteQueryOptions

   • Optional, represents the options of the useSuspenseInfiniteQuery(...) 🌴 Hook
     • queryOptions.queryFn could be provided to override the default queryFn used by Qraft
     • queryOptions.queryKey is not allowed, as it will be generated from parameters

3. queryClient?: QueryClient

   • Optional QueryClient 🌴 to be used
   • If not provided
     • QraftContext.queryClient will be used if available
     • useQueryClient() 🌴 result will be used as a fallback

Returns

Same object as UseInfiniteQueryResult object, except that:

• data is guaranteed to be defined
• isPlaceholderData is missing
• status is always success
  • the derived flags are set accordingly.

See the TanStack useSuspenseInfiniteQuery(...) 🌴 documentation for more details.

Examples

src/PostList.tsx

import { Suspense } from 'react';
import { createAPIClient } from './api'; // generated by OpenAPI Qraft CLI

const qraft = createAPIClient();

function PostList() {
  /**
   * `qraft.posts.getPosts.useSuspenseInfiniteQuery(...)` launches the initial fetch operation:
   * ###
   * GET /posts?limit=10&page=1
   */
  const infiniteQuery = qraft.posts.getPosts.useSuspenseInfiniteQuery(
    { query: { limit: 10 } },
    {
      getNextPageParam: (lastPage, allPages, lastPageParams) => {
        if (lastPage.length < 10) return; // if less than 10 items, there are no more pages
        return {
          query: {
            page: Number(lastPageParams.query?.page) + 1,
          },
        };
      },
      initialPageParam: {
        query: {
          page: 1, // will be used in initial request
        },
      },
    }
  );

  return (
    <div>
      {infiniteQuery.data.pages.map((page, pageIndex) => (
        <ul key={pageIndex}>
          {page.map((post) => (
            <li key={post.id}>{post.title}</li>
          ))}
        </ul>
      ))}
      <button onClick={() => {
        // ⬇︎ Initiates a GET request: GET /posts?limit=10&page=2
        infiniteQuery.fetchNextPage()
      }}>
        Load More
      </button>
    </div>
  );
}

export default function() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <PostList />
    </Suspense>
  );
}