queryOptions

호출 시그니처

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;

정의 위치: preact-query/src/queryOptions.ts:140

일반적으로 useQuery에 전달할 수 있는 모든 항목을 queryOptions에도 전달할 수 있습니다. 이러한 옵션은 훅 및 queryClient.query 같은 명령형 API 간에 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

initialData가 설정되면 이 오버로드가 선택되므로, 결과 data는 절대 undefined가 아닙니다.

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수

옵션

DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

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

반환값

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

참조

이 옵션으로 쿼리를 실행하려면 useQuery를 사용합니다.

예시

import { queryOptions, useQuery } from '@tanstack/preact-query'

export const postsOptions = queryOptions({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  initialData: [],
})

function Posts() {
  // `data` is `Post[]`, never `undefined`, thanks to `initialData` — even if a refetch fails,
  // so the list stays visible alongside the error.
  const { data, isError, error } = useQuery(postsOptions)

  return (
    <div>
      {isError ? <span>Error: {error.message}</span> : null}
      <ul>
        {data.map((post) => <li key={post.id}>{post.title}</li>)}
      </ul>
    </div>
  )
}

호출 시그니처

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): OmitKeyof<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, "queryFn"> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;

정의 위치: preact-query/src/queryOptions.ts:213

일반적으로 useQuery에 전달할 수 있는 모든 항목을 queryOptions에도 전달할 수 있습니다. 이러한 옵션은 훅 및 queryClient.query 같은 명령형 API 간에 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수

옵션

UnusedSkipTokenOptions<TQueryFnData, TError, TData, TQueryKey>

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

반환값

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

참조

이 옵션으로 쿼리를 실행하려면 useQuery를 사용합니다.

예시

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

import { noop, queryOptions, useQuery } from '@tanstack/preact-query'

export const postOptions = (id: string) =>
  queryOptions({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })

function Post({ id }: { id: string }) {
  const { data, isPending, isError, error } = useQuery(postOptions(id))

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

  return <h1>{data.title}</h1>
}

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

동일한 옵션 객체를 쿼리 옵션을 받는 모든 API에서 사용할 수 있습니다:

import { noop, queryOptions, useQuery } from '@tanstack/preact-query'

const todosOptions = queryOptions({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

function Todos() {
  const { data, isPending, isError, error } = useQuery(todosOptions)

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

  return (
    <ul>
      {data.map((todo) => <li key={todo.id}>{todo.title}</li>)}
    </ul>
  )
}

// The same options object works with the imperative APIs too:
queryClient.query(todosOptions).catch(noop)
queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined

호출 시그니처

function queryOptions<TQueryFnData, TError, TData, TQueryKey>(options): UseQueryOptions<TQueryFnData, TError, TData, TQueryKey> & object & QueryKeyWithDataTag<TQueryKey, TQueryFnData, TError>;

정의 위치: preact-query/src/queryOptions.ts:309

일반적으로 useQuery에 전달할 수 있는 모든 항목을 queryOptions에도 전달할 수 있습니다. 이러한 옵션은 훅 및 queryClient.query 같은 명령형 API 간에 공유할 수 있습니다. options.queryKey는 필수이며 옵션을 생성할 쿼리 키입니다.

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수

옵션

UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

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

반환값

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

참조

이 옵션으로 쿼리를 실행하려면 useQuery를 사용합니다.

비고

이는 아래에 표시된 것처럼 queryFn: skipToken을 허용하는 유일한 오버로드입니다.

예시

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

import { noop, queryOptions, useQuery } from '@tanstack/preact-query'

export const postOptions = (id: string) =>
  queryOptions({
    queryKey: ['post', id],
    queryFn: () => fetchPost(id),
  })

function Post({ id }: { id: string }) {
  const { data, isPending, isError, error } = useQuery(postOptions(id))

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

  return <h1>{data.title}</h1>
}

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

동일한 옵션 객체를 쿼리 옵션을 받는 모든 API에서 사용할 수 있습니다:

import { noop, queryOptions, useQuery } from '@tanstack/preact-query'

const todosOptions = queryOptions({
  queryKey: ['todos'],
  queryFn: fetchTodos,
})

function Todos() {
  const { data, isPending, isError, error } = useQuery(todosOptions)

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

  return (
    <ul>
      {data.map((todo) => <li key={todo.id}>{todo.title}</li>)}
    </ul>
  )
}

// The same options object works with the imperative APIs too:
queryClient.query(todosOptions).catch(noop)
queryClient.getQueryData(todosOptions.queryKey) // typed as Array<Todo> | undefined

postId가 설정될 때까지 쿼리를 타입 안전하게 비활성화하는 팩토리입니다:

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

export const postOptions = (postId: number | undefined) =>
  queryOptions({
    queryKey: ['post', postId],
    queryFn: postId != null ? () => fetchPost(postId) : skipToken,
  })

function Post({ postId }: { postId: number | undefined }) {
  const { data, isLoading, isError, error } = useQuery(postOptions(postId))

  if (postId == null) return 'Select a post'
  if (isLoading) return 'Loading...'
  if (isError) return <span>Error: {error.message}</span>

  return <h1>{data?.title}</h1>
}