새 API 훅 생성

$ARGUMENTS 설명을 가진 $0 엔드포인트에 대한 새 API 훅을 생성합니다.

다음 단계를 따르세요:

1. 기존 패턴 분석

packages/ui/src/hooks/api/reactQueryHelper.ts를 읽어 queryFn과 queryClient 이해
packages/ui/src/constants/EndPoints.ts에서 엔드포인트 네이밍 확인
packages/ui/src/hooks/api/의 유사한 기존 훅에서 패턴 파악

2. 엔드포인트 정의

packages/ui/src/constants/EndPoints.ts에 엔드포인트 상수 추가:

export const NEW_ENDPOINT = `/api/path/to/endpoint`;

3. 타입 정의

packages/ui/src/constants/types/에 타입 생성 또는 확장:

export namespace GetNewData {
  export interface Parameters {
    applicationName: string;
    from: number;
    to: number;
    // ... 기타 파라미터
  }
  export interface Response {
    // ... 응답 형태
  }
}

import { useQuery } from '@tanstack/react-query';
import { END_POINTS, GetNewData } from '@pinpoint-fe/ui/src/constants';
import { convertParamsToQueryString } from '@pinpoint-fe/ui/src/utils';
import { queryFn } from './reactQueryHelper';

export const useGetNewData = (params: GetNewData.Parameters) => {
  const queryString = convertParamsToQueryString(params);

  return useQuery<GetNewData.Response>({
    queryKey: [END_POINTS.NEW_ENDPOINT, queryString],
    queryFn: queryFn(`${END_POINTS.NEW_ENDPOINT}?${queryString}`),
    enabled: !!params.applicationName,
    gcTime: 30000,
  });
};

Create Api Hook | Skills Pool

Create Api Hook

Create Api Hook

새 API 훅 생성

1. 기존 패턴 분석

2. 엔드포인트 정의

3. 타입 정의

4. 훅 생성

5. 훅 익스포트

6. 핵심 가이드라인

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns