useInfiniteQuery

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/react-query documentation.

Example

src/app.tsx

import { $api } from "./api"; const PostList = () => {  const { data, fetchNextPage, hasNextPage, isFetching } =  $api.useInfiniteQuery(  "get",  "/posts",  {  params: {  query: {  limit: 10,  },  },  },  {  getNextPageParam: (lastPage) => lastPage.nextPage,  initialPageParam: 0,  }  );   return (  <div>  {data?.pages.map((page, i) => (  <div key={i}>  {page.items.map((post) => (  <div key={post.id}>{post.title}</div>  ))}  </div>  ))}  {hasNextPage && (  <button onClick={() => fetchNextPage()} disabled={isFetching}>  {isFetching ? "Loading..." : "Load More"}  </button>  )}  </div>  ); };  export const App = () => {  return (  <ErrorBoundary fallbackRender={({ error }) => `Error: ${error.message}`}>  <MyComponent />  </ErrorBoundary>  ); };

src/api.ts

import createFetchClient from "openapi-fetch"; import createClient from "openapi-react-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
  • pageParamName The query param name used for pagination, "cursor" by default.
  • The original useInfiniteQuery options.
  • See more information
• queryClient
  • The original queryClient option.
  • See more information