본문으로 건너뛰기

useInfiniteQuery

호출 시그니처​

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): DefinedUseInfiniteQueryResult<TData, TError>;

정의 위치: preact-query/src/useInfiniteQuery.ts:64

useInfiniteQuery의 옵션은 queryFn이 추가된다는 점을 제외하면 useQuery와 동일합니다, initialPageParam, getNextPageParam, getPreviousPageParam 및 maxPages.

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에 전달할 수 있는 모든 항목을 포함합니다.

queryClient?​

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값​

DefinedUseInfiniteQueryResult<TData, TError>

useQuery와 동일한 속성에 data.pages, data.pageParams가 추가됩니다, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage 및 isFetchingPreviousPage.

비고​

fetchNextPage와 같은 명령형 가져오기 호출은 기본 동작을 방해할 수 있다는 점에 유의하세요 다시 가져오기 동작으로 인해 데이터가 오래된 상태가 됩니다. 이러한 함수는 반드시 사용자의 작업을 수행하거나 hasNextPage && !isFetching 같은 조건을 추가합니다.

참조​

useInfiniteQuery와 queryClient.infiniteQuery 같은 명령형 API 간에 이러한 옵션을 공유하려면 infiniteQueryOptions를 사용합니다.

예시​

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

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({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
    initialData: { pages: [], pageParams: [] },
  })

  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 useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;

정의 위치: preact-query/src/useInfiniteQuery.ts:189

useInfiniteQuery의 옵션은 queryFn이 추가된다는 점을 제외하면 useQuery와 동일합니다, initialPageParam, getNextPageParam, getPreviousPageParam 및 maxPages.

타입 매개변수​

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에 전달할 수 있는 모든 항목입니다.

queryClient?​

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값​

UseInfiniteQueryResult<TData, TError>

useQuery와 동일한 속성에 data.pages, data.pageParams가 추가됩니다, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage 및 isFetchingPreviousPage.

비고​

fetchNextPage와 같은 명령형 가져오기 호출은 기본 동작을 방해할 수 있다는 점에 유의하세요 다시 가져오기 동작으로 인해 데이터가 오래된 상태가 됩니다. 이러한 함수는 반드시 사용자의 작업을 수행하거나 hasNextPage && !isFetching 같은 조건을 추가합니다.

참조​

useInfiniteQuery와 queryClient.infiniteQuery 같은 명령형 API 간에 이러한 옵션을 공유하려면 infiniteQueryOptions를 사용합니다.

예시​

"더 불러오기" 버튼 클릭으로 다음 페이지 가져오기:

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

function Projects() {
  const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ['projects'],
      queryFn: ({ pageParam }) => fetchProjects(pageParam),
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextId,
    })

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

  return (
    <>
      <ul>
        {data.pages.map((page) =>
          page.projects.map((project) => <li key={project.id}>{project.name}</li>),
        )}
      </ul>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetching}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </>
  )
}

사용자가 스크롤할 때 다음 페이지를 자동으로 가져오며, 다음의 IntersectionObserver를 사용합니다 목록 뒤의 센티널 요소:

import { useInfiniteQuery } from '@tanstack/preact-query'
import { useEffect, useRef } from 'preact/hooks'

function Projects() {
  const {
    data,
    isPending,
    isError,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const sentinel = sentinelRef.current
    if (sentinel == null || !hasNextPage || isFetching) return

    const observer = new IntersectionObserver(([entry]) => {
      if (entry?.isIntersecting) fetchNextPage()
    })
    observer.observe(sentinel)

    return () => observer.disconnect()
  }, [hasNextPage, isFetching, fetchNextPage])

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

  return (
    <>
      <ul>
        {data.pages.map((page) =>
          page.projects.map((project) => <li key={project.id}>{project.name}</li>),
        )}
      </ul>
      <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
    </>
  )
}

호출 시그니처​

function useInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): UseInfiniteQueryResult<TData, TError>;

정의 위치: preact-query/src/useInfiniteQuery.ts:390

useInfiniteQuery의 옵션은 queryFn이 추가된다는 점을 제외하면 useQuery와 동일합니다, initialPageParam, getNextPageParam, getPreviousPageParam 및 maxPages.

타입 매개변수​

TQueryFnData​

TQueryFnData

TError​

TError = Error

TData​

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey​

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam​

TPageParam = unknown

매개변수​

옵션​

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

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

queryClient?​

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값​

UseInfiniteQueryResult<TData, TError>

useQuery와 동일한 속성에 data.pages, data.pageParams가 추가됩니다, fetchNextPage, fetchPreviousPage, hasNextPage, hasPreviousPage, isFetchingNextPage 및 isFetchingPreviousPage.

비고​

fetchNextPage와 같은 명령형 가져오기 호출은 기본 동작을 방해할 수 있다는 점에 유의하세요 다시 가져오기 동작으로 인해 데이터가 오래된 상태가 됩니다. 이러한 함수는 반드시 사용자의 작업을 수행하거나 hasNextPage && !isFetching 같은 조건을 추가합니다.

참조​

useInfiniteQuery와 queryClient.infiniteQuery 같은 명령형 API 간에 이러한 옵션을 공유하려면 infiniteQueryOptions를 사용합니다.

예시​

"더 불러오기" 버튼 클릭으로 다음 페이지 가져오기:

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

function Projects() {
  const { data, isPending, isError, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
    useInfiniteQuery({
      queryKey: ['projects'],
      queryFn: ({ pageParam }) => fetchProjects(pageParam),
      initialPageParam: 0,
      getNextPageParam: (lastPage) => lastPage.nextId,
    })

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

  return (
    <>
      <ul>
        {data.pages.map((page) =>
          page.projects.map((project) => <li key={project.id}>{project.name}</li>),
        )}
      </ul>
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetching}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
            ? 'Load More'
            : 'Nothing more to load'}
      </button>
    </>
  )
}

사용자가 스크롤할 때 다음 페이지를 자동으로 가져오며, 다음의 IntersectionObserver를 사용합니다 목록 뒤의 센티널 요소:

import { useInfiniteQuery } from '@tanstack/preact-query'
import { useEffect, useRef } from 'preact/hooks'

function Projects() {
  const {
    data,
    isPending,
    isError,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: ({ pageParam }) => fetchProjects(pageParam),
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

  const sentinelRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const sentinel = sentinelRef.current
    if (sentinel == null || !hasNextPage || isFetching) return

    const observer = new IntersectionObserver(([entry]) => {
      if (entry?.isIntersecting) fetchNextPage()
    })
    observer.observe(sentinel)

    return () => observer.disconnect()
  }, [hasNextPage, isFetching, fetchNextPage])

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

  return (
    <>
      <ul>
        {data.pages.map((page) =>
          page.projects.map((project) => <li key={project.id}>{project.name}</li>),
        )}
      </ul>
      <div ref={sentinelRef}>{isFetchingNextPage ? 'Loading more...' : null}</div>
    </>
  )
}

마우스를 올릴 때 캐시를 워밍업하여 <Comments>가 클릭되는 즉시 데이터를 보유하도록 합니다. 다음이 필요합니다: infiniteQueryOptions 팩토리를 사용하므로 훅과 명령형 호출이 동일한 캐시 항목을 공유합니다:

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

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>
  )
}

function PostLink({ postId, title }: { postId: string; title: string }) {
  const queryClient = useQueryClient()

  return (
    <a
      href={`/posts/${postId}`}
      onMouseEnter={() => queryClient.infiniteQuery(commentsOptions(postId)).catch(noop)}
    >
      {title}
    </a>
  )
}

postId가 설정될 때까지 비활성화되며 타입 안전한 쿼리입니다 — skipToken을 queryFn으로 전달하세요 enabled: false를 설정하는 대신:

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

function Comments({ postId }: { postId: string | undefined }) {
  // Use `isLoading`, not `isPending`, so the loading state doesn't show while the query is disabled.
  const { data, isLoading, isError, error } = useInfiniteQuery({
    queryKey: ['post', postId, 'comments'],
    queryFn:
      postId != null
        ? ({ pageParam }) => fetchComments(postId, pageParam)
        : skipToken,
    initialPageParam: 0,
    getNextPageParam: (lastPage) => lastPage.nextId,
  })

  if (postId == null) return 'Select a post'
  if (isLoading) 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>
  )
}