본문으로 건너뛰기

injectQuery

고유한 키에 연결된 비동기 데이터 소스에 대한 선언적 의존성인 쿼리를 주입합니다.

기본 예제

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Angular의 computed와 유사하게, injectQuery에 전달된 함수는 반응형 컨텍스트에서 실행됩니다. 아래 예시에서는 필터 signal이 변경될 때 쿼리가 자동으로 활성화되고 실행됩니다 truthy 값으로 설정합니다. 필터 signal이 다시 falsy 값으로 변경되면 쿼리가 비활성화됩니다.

반응형 예제

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

매개변수​

쿼리 옵션을 반환하는 함수입니다.

매개변수​

추가 구성

참조​

https://tanstack.com/query/latest/docs/framework/angular/guides/queries

호출 시그니처​

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): DefinedCreateQueryResult<TData, TError>;

정의 위치: inject-query.ts:65

고유한 키에 연결된 비동기 데이터 소스에 대한 선언적 의존성인 쿼리를 주입합니다.

기본 예제

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Angular의 computed와 유사하게, injectQuery에 전달된 함수는 반응형 컨텍스트에서 실행됩니다. 아래 예시에서는 필터 signal이 변경될 때 쿼리가 자동으로 활성화되고 실행됩니다 truthy 값으로 설정합니다. 필터 signal이 다시 falsy 값으로 변경되면 쿼리가 비활성화됩니다.

반응형 예제

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

타입 매개변수​

TQueryFnData​

TQueryFnData = unknown

TError​

TError = Error

TData​

TData = TQueryFnData

TQueryKey​

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수​

injectQueryFn​

() => DefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

쿼리 옵션을 반환하는 함수입니다.

options?​

InjectQueryOptions

추가 구성

반환값​

DefinedCreateQueryResult<TData, TError>

쿼리 결과.

참조​

https://tanstack.com/query/latest/docs/framework/angular/guides/queries

호출 시그니처​

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;

정의 위치: inject-query.ts:116

고유한 키에 연결된 비동기 데이터 소스에 대한 선언적 의존성인 쿼리를 주입합니다.

기본 예제

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Angular의 computed와 유사하게, injectQuery에 전달된 함수는 반응형 컨텍스트에서 실행됩니다. 아래 예시에서는 필터 signal이 변경될 때 쿼리가 자동으로 활성화되고 실행됩니다 truthy 값으로 설정합니다. 필터 signal이 다시 falsy 값으로 변경되면 쿼리가 비활성화됩니다.

반응형 예제

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

타입 매개변수​

TQueryFnData​

TQueryFnData = unknown

TError​

TError = Error

TData​

TData = TQueryFnData

TQueryKey​

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수​

injectQueryFn​

() => UndefinedInitialDataOptions<TQueryFnData, TError, TData, TQueryKey>

쿼리 옵션을 반환하는 함수입니다.

options?​

InjectQueryOptions

추가 구성

반환값​

CreateQueryResult<TData, TError>

쿼리 결과.

참조​

https://tanstack.com/query/latest/docs/framework/angular/guides/queries

호출 시그니처​

function injectQuery<TQueryFnData, TError, TData, TQueryKey>(injectQueryFn, options?): CreateQueryResult<TData, TError>;

정의 위치: inject-query.ts:167

고유한 키에 연결된 비동기 데이터 소스에 대한 선언적 의존성인 쿼리를 주입합니다.

기본 예제

class ServiceOrComponent {
  query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      this.#http.get<Response>('https://api.github.com/repos/tanstack/query'),
  }))
}

Angular의 computed와 유사하게, injectQuery에 전달된 함수는 반응형 컨텍스트에서 실행됩니다. 아래 예시에서는 필터 signal이 변경될 때 쿼리가 자동으로 활성화되고 실행됩니다 truthy 값으로 설정합니다. 필터 signal이 다시 falsy 값으로 변경되면 쿼리가 비활성화됩니다.

반응형 예제

class ServiceOrComponent {
  filter = signal('')

  todosQuery = injectQuery(() => ({
    queryKey: ['todos', this.filter()],
    queryFn: () => fetchTodos(this.filter()),
    // Signals can be combined with expressions
    enabled: !!this.filter(),
  }))
}

타입 매개변수​

TQueryFnData​

TQueryFnData = unknown

TError​

TError = Error

TData​

TData = TQueryFnData

TQueryKey​

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수​

injectQueryFn​

() => CreateQueryOptions<TQueryFnData, TError, TData, TQueryKey>

쿼리 옵션을 반환하는 함수입니다.

options?​

InjectQueryOptions

추가 구성

반환값​

CreateQueryResult<TData, TError>

쿼리 결과.

참조​

https://tanstack.com/query/latest/docs/framework/angular/guides/queries