Angular HttpClient 및 기타 데이터 가져오기 client

TanStack Query의 가져오기 메커니즘은 Promise를 기반으로 특정 구현에 종속되지 않게 구축되었으므로, 브라우저 네이티브 fetch API, graphql-request 등을 포함해 말 그대로 어떤 비동기 데이터 가져오기 클라이언트든 사용할 수 있습니다.

데이터 가져오기에 Angular의 HttpClient 사용하기

HttpClient는 Angular의 강력하고 통합된 부분이며, 다음과 같은 이점을 제공합니다:

• 단위 테스트에서 provideHttpClientTesting을 사용하여 응답을 모의 처리합니다.
• 인터셉터는 인증 헤더 추가, 로깅 수행 등을 비롯한 광범위한 기능에 사용할 수 있습니다. 일부 데이터 가져오기 라이브러리는 자체 인터셉터 시스템을 제공하지만, HttpClient 인터셉터는 Angular의 의존성 주입 시스템과 통합되어 있습니다.
• HttpClient는 PendingTasks에 자동으로 알리며, 이를 통해 Angular가 대기 중인 요청을 인식할 수 있습니다. 단위 테스트와 SSR은 그 결과로 얻은 애플리케이션 안정성 정보를 사용하여 대기 중인 요청이 완료될 때까지 기다릴 수 있습니다. 이를 통해 Zoneless 애플리케이션의 단위 테스트가 훨씬 쉬워집니다.
• SSR을 사용할 때 HttpClient는 서버에서 수행되는 요청을 캐시합니다. 이렇게 하면 클라이언트에서 불필요한 요청이 발생하지 않습니다. HttpClient SSR 캐싱은 별도 설정 없이 작동합니다. TanStack Query에는 더 강력할 수 있지만 일부 설정이 필요한 자체 하이드레이션 기능이 있습니다. 어느 것이 요구 사항에 가장 적합한지는 사용 사례에 따라 달라집니다.

queryFn에서 observable 사용하기

TanStack Query는 Promise 기반 라이브러리이므로 HttpClient의 observable을 Promise로 변환해야 합니다. 이는 rxjs의 lastValueFrom 또는 firstValueFrom 함수로 수행할 수 있습니다.

@Component({
  // ...
})
class ExampleComponent {
  private readonly http = inject(HttpClient)

  readonly query = injectQuery(() => ({
    queryKey: ['repoData'],
    queryFn: () =>
      lastValueFrom(
        this.http.get('https://api.github.com/repos/tanstack/query'),
      ),
  }))
}

Angular가 RxJS를 선택적 dependency로 사용하는 방향으로 전환하고 있으므로, 향후 HttpClient도 Promise를 지원할 것으로 예상됩니다.

Angular용 TanStack Query에서 observable 지원이 계획되어 있습니다.

비교표

데이터 가져오기 클라이언트	장점	단점
Angular HttpClient	기능이 풍부하고 Angular와 매우 잘 통합됩니다.	Observable은 Promise로 변환해야 합니다.
가져오기	브라우저 네이티브 API이므로 번들 크기가 전혀 증가하지 않습니다.	많은 기능이 빠진 기본적인 API입니다.
**graphql-request**와 같은 특화 라이브러리	특정 사용 사례를 위한 특화 기능입니다.	Angular 라이브러리가 아니면 프레임워크와 원활하게 통합되지 않습니다.