infiniteQueryOptions

호출 시그니처

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;

정의 위치: preact-query/src/infiniteQueryOptions.ts:169

일반적으로 useInfiniteQuery에 전달할 수 있는 모든 항목을 infiniteQueryOptions에도 전달할 수 있습니다. 이 옵션은 훅과 queryClient.infiniteQuery 같은 명령형 API 전반에서 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

initialData가 설정되면 이 오버로드가 선택됩니다.

타입 매개변수

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

옵션

DefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

사용할 DefinedInitialDataInfiniteOptions입니다. initialData가 설정된 상태로 useInfiniteQuery에 전달할 수 있는 모든 항목을 포함합니다.

반환값

동일한 옵션 객체이며, queryKey가 추론된 데이터 타입을 전달하도록 타입이 지정됩니다.

참조

useInfiniteQuery를 사용하여 이러한 옵션으로 무한 쿼리를 실행합니다.

비고

버튼 클릭 또는 다른 방식으로 추가 페이지를 가져오는 예시는 useInfiniteQuery에서 확인하세요. 사용자가 스크롤할 때 자동으로 수행됩니다.

예시

import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/preact-query'

export const projectsOptions = infiniteQueryOptions({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
  initialData: { pages: [], pageParams: [] },
})

function Projects() {
  // `data` is never `undefined`, thanks to `initialData` — even if a refetch fails, so the
  // list stays visible alongside the error.
  const { data, isError, error } = useInfiniteQuery(projectsOptions)

  return (
    <div>
      {isError ? <span>Error: {error.message}</span> : null}
      <ul>
        {data.pages.map((page) => page.projects.map((p) => <li key={p.id}>{p.name}</li>))}
      </ul>
    </div>
  )
}

호출 시그니처

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): OmitKeyof<UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;

정의 위치: preact-query/src/infiniteQueryOptions.ts:240

일반적으로 useInfiniteQuery에 전달할 수 있는 모든 항목을 infiniteQueryOptions에도 전달할 수 있습니다. 이 옵션은 훅과 queryClient.infiniteQuery 같은 명령형 API 전반에서 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

타입 매개변수

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

옵션

UnusedSkipTokenInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

사용할 UnusedSkipTokenInfiniteOptions입니다 — useInfiniteQuery에 전달할 수 있는 모든 항목입니다.

반환값

동일한 옵션 객체이며, queryKey가 추론된 데이터 타입을 전달하도록 타입이 지정됩니다.

비고

버튼 클릭 또는 다른 방식으로 추가 페이지를 가져오는 예시는 useInfiniteQuery에서 확인하세요. 사용자가 스크롤할 때 자동으로 수행됩니다.

예시

동일한 캐시 항목을 사용하는 훅과 명령형 호출에서 재사용되는 매개변수화된 팩토리:

import {
  infiniteQueryOptions,
  noop,
  useInfiniteQuery,
} from '@tanstack/preact-query'

export const commentsOptions = (postId: string) =>
  infiniteQueryOptions({
    queryKey: ['post', postId, 'comments'],
    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

function Comments({ postId }: { postId: string }) {
  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))

  if (isPending) return 'Loading...'
  if (isError) return <span>Error: {error.message}</span>

  return (
    <ul>
      {data.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
    </ul>
  )
}

// `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` —
// see `useInfiniteQuery` for an example that warms the cache this way before rendering `<Comments>`.
const postId = '1'
queryClient.infiniteQuery(commentsOptions(postId)).catch(noop)

참조

useInfiniteQuery를 사용하여 이러한 옵션으로 무한 쿼리를 실행합니다.

호출 시그니처

function infiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options): UseInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam> & object & QueryKeyWithDataTag<TQueryKey, InfiniteData<TQueryFnData, unknown>, TError>;

정의 위치: preact-query/src/infiniteQueryOptions.ts:311

일반적으로 useInfiniteQuery에 전달할 수 있는 모든 항목을 infiniteQueryOptions에도 전달할 수 있습니다. 이 옵션은 훅과 queryClient.infiniteQuery 같은 명령형 API 전반에서 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

타입 매개변수

TQueryFnData

TQueryFnData

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

옵션

UndefinedInitialDataInfiniteOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

사용할 UndefinedInitialDataInfiniteOptions입니다 — useInfiniteQuery에 전달할 수 있는 모든 항목입니다.

반환값

동일한 옵션 객체이며, queryKey가 추론된 데이터 타입을 전달하도록 타입이 지정됩니다.

비고

추가 페이지를 가져오는 예시는 useInfiniteQuery에서 확인하세요(버튼 클릭 또는 사용자가 스크롤할 때 자동으로 수행)하며, postId가 설정될 때까지 쿼리를 비활성화하기 위해 skipToken을 사용합니다.

예시

동일한 캐시 항목을 사용하는 훅과 명령형 호출에서 재사용되는 매개변수화된 팩토리:

import {
  infiniteQueryOptions,
  noop,
  useInfiniteQuery,
} from '@tanstack/preact-query'

export const commentsOptions = (postId: string) =>
  infiniteQueryOptions({
    queryKey: ['post', postId, 'comments'],
    queryFn: ({ pageParam }) => fetchComments(postId, pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

function Comments({ postId }: { postId: string }) {
  const { data, isPending, isError, error } = useInfiniteQuery(commentsOptions(postId))

  if (isPending) return 'Loading...'
  if (isError) return <span>Error: {error.message}</span>

  return (
    <ul>
      {data.pages.map((page) => page.comments.map((c) => <li key={c.id}>{c.text}</li>))}
    </ul>
  )
}

// `commentsOptions` also works with imperative APIs like `queryClient.infiniteQuery` —
// see `useInfiniteQuery` for an example that warms the cache this way before rendering `<Comments>`.
const postId = '1'
queryClient.infiniteQuery(commentsOptions(postId)).catch(noop)

참조

useInfiniteQuery를 사용하여 이러한 옵션으로 무한 쿼리를 실행합니다.