TanStack Angular 쿼리를 사용하여 Angular v에서 API 호출 간소화

이 문서에서는 효율적인 API 호출을 위해 Angular v18 프로젝트에서 안정적인 @tanstack/query-angular 패키지를 사용하는 방법에 대한 지침을 제공합니다.

Angular 프로젝트에서 API 상호 작용을 관리하는 데는 종종 반복적인 논리가 포함되어 코드 중복, 유지 관리 부담 증가, 잠재적인 상태 관리 복잡성이 발생합니다. @tanstack/angular-query-experimental은 강력한 솔루션을 제공하지만 이 패키지는 아직 실험적 개발 중이라는 점에 유의하는 것이 중요합니다. 대신, 특히 Angular v17 프로젝트의 경우 안정적인 @tanstack/angular-query-experimental 패키지 활용을 고려해 보세요.

TanStack 각도 쿼리의 주요 이점:

선언적 접근 방식: API 요청 및 관련 데이터 처리를 캡슐화하여 깔끔하고 읽기 쉬운 코드를 만드는 쿼리 기능을 정의합니다.

자동 캐싱 및 다시 가져오기: "재검증 중 오래된 기능"과 같은 기본 제공 캐싱 전략을 활용하여 성능을 최적화하고 불필요한 서버 호출을 줄입니다. 데이터 일관성 향상을 위해 필요에 따라(예: 데이터 부실 또는 창 재초점) 데이터 다시 가져오기를 구현합니다.

반응형 데이터 처리: 관찰 가능 항목과 신호를 사용하여 데이터에 액세스하고 관리하여 수동 수명 주기 후크나 복잡한 상태 관리 패턴 없이 UI 구성 요소의 반응형 업데이트를 가능하게 합니다.

모듈식 설계: API 로직을 재사용 가능한 쿼리 엔터티로 구성하여 코드 구성 및 유지 관리성을 향상합니다.

전용 Devtool: TanStack Query Devtools를 통해 쿼리 실행, 캐시 상태, 다시 가져오기 패턴에 대한 통찰력을 얻고 디버깅과 최적화를 촉진합니다.

설치:

npm 또는 Yarn을 사용하여 필요한 패키지를 설치합니다.

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

단계별 구현:

@tanstack/angular-query-experimental은 Angular v17에서 사용할 수 있지만 현재 실험적으로 개발 중이므로 프로덕션 용도로는 권장되지 않습니다. Angular v17 프로젝트에서 안정적이고 안정적인 API 호출 관리를 위해서는 안정적인 @tanstack/query-angular 패키지 사용을 고려해 보세요.

다음은 단계별 구현 가이드입니다.

1. app.config.ts에 공급자를 추가합니다.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

• providHttpClient, QueryClient, ProvideAngularQuery 가져오기
• 종속성 주입을 통해 라우팅, HTTP 및 Angular 쿼리 기능을 제공하여 앱 구성 개체를 정의하고 내보냅니다.

2. API 응답에 대한 Typescript 기반 유형을 정의합니다.

TypeScript에서는 데이터의 구조와 유형을 지정하여 코드 구성과 오류 방지에 도움이 되는 유형을 사용합니다. Angular 애플리케이션 내에서 이 유형은 API 또는 기타 데이터 소스에서 검색된 데이터를 구조화하기 위한 청사진 역할을 할 가능성이 높습니다.

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

3. API 호출을 사용하도록 repos.service.ts 서비스를 정의합니다.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

이 서비스는 저장소 데이터를 가져오기 위해 GitHub API에 HTTP 요청을 보내는 역할을 담당합니다. HttpClient를 사용하여 요청을 하고 응답 데이터가 응답 유형에 정의된 구조를 따르기를 기대합니다.

4. 구성 요소 github-repo-list.comComponent.ts에서 각도 쿼리를 시작합니다.

구성요소는 Angular Query를 사용하여 데이터 가져오기 및 캐싱을 관리합니다. ReposService를 주입하여 API 호출을 수행합니다. queryFn을 사용하여 저장소 데이터를 가져오기 위해 고유 키 'repoData'로 쿼리를 정의합니다.

export type Response = {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

5. 구성 요소 UI github-repo-list.comComponent.html에서 데이터를 렌더링해 보겠습니다.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response } from '../../types/responce.type';

@Injectable({
  providedIn: 'root'
})
export class ReposService {

  endpoint: string = 'https://api.github.com';

  constructor(
    private http: HttpClient
  ) { }

  getRepos() {
    return this.http.get<Response>(`${this.endpoint}/repos/tanstack/query`);
  }
}

• 이 템플릿은 쿼리 상태(로드, 오류 또는 성공)에 따라 조건부로 다양한 콘텐츠를 렌더링합니다.
• 다양한 시나리오를 효과적으로 처리하여 사용자에게 적절한 피드백을 제공합니다.
• 디버깅 및 검사를 위한 Angular Query 개발 도구가 통합되어 있습니다.

작업 데모:

Github에서 전체 소스 코드를 확인하세요. 고마워요?

위 내용은 TanStack Angular 쿼리를 사용하여 Angular v에서 API 호출 간소화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!