openapiConfig

@hey-api/openapi-ts를 위한 사전 구성된 설정 팩토리 함수입니다. Liner 백엔드 서비스의 OpenAPI 스펙을 기반으로 타입 안전한 API 클라이언트를 생성합니다.

Import

import { openapiConfig } from '@liner-engineering/orbit-core/openapi-gen';

사용 예시

// openapi-ts.config.ts
import { openapiConfig } from '@liner-engineering/orbit-core/openapi-gen';

export default openapiConfig();

CLI 실행

npx @hey-api/openapi-ts

TIP

openapi-ts.config.ts 파일이 프로젝트 루트에 있으면 자동으로 인식됩니다.

생성되는 파일

실행 후 output.path에 다음 파일들이 생성됩니다:

src/apis/generated/
├── index.ts          # 모든 export 통합
├── types.gen.ts      # TypeScript 타입 정의
├── zod.gen.ts        # Zod 스키마
├── client.gen.ts     # Axios 클라이언트
└── @tanstack/
    └── react-query.gen.ts  # React Query hooks

추가로 작성해야 할 파일

생성된 파일 외에 다음 파일들을 직접 작성해야 합니다:

1. src/apis/hey-api.ts - 클라이언트 설정

@hey-api/client-axios의 런타임 설정 파일입니다. openapiConfig의 runtimeConfigPath에서 참조합니다.

import { Config } from 'react-native-config';

import { apiHeaderConfig } from '../configs/api-header.config';

import { CreateClientConfig } from './generated/client';

export const createClientConfig: CreateClientConfig = (config) => ({
  ...config,
  baseURL: Config.API as string,
  throwOnError: true,
  headers: {
    ...apiHeaderConfig,
    'Content-Type': 'application/json',
  },
});

2. src/apis/query-client.ts - QueryClient 설정

React Query의 QueryClient 인스턴스를 생성합니다.

import { QueryClient } from '@tanstack/react-query';

export const linerQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      gcTime: 1000 * 60 * 10, // 10분
      retry: 3,
      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
      refetchOnWindowFocus: false,
    },
    mutations: {
      retry: 0,
    },
  },
});

3. src/apis/index.ts - Export 통합

생성된 파일들과 직접 작성한 파일들을 통합 export합니다.

// React Query Client
export * from './query-client';

// API Client
export { client } from './generated/client.gen';

// React Query Hooks, API Callers, Types
export * from './generated';

// Zod Schemas
export * from './generated/zod.gen';

디렉토리 구조 예시

최종 디렉토리 구조는 다음과 같습니다:

src/apis/
├── generated/              # 자동 생성 (수정 금지)
│   ├── index.ts
│   ├── types.gen.ts
│   ├── zod.gen.ts
│   ├── client.gen.ts
│   ├── sdk.gen.ts
│   ├── client/
│   │   └── ...
│   ├── core/
│   │   └── ...
│   └── @tanstack/
│       └── react-query.gen.ts
├── hey-api.ts              # 직접 작성 - 클라이언트 설정
├── query-client.ts         # 직접 작성 - QueryClient 설정
└── index.ts                # 직접 작성 - Export 통합

WARNING

generated/ 폴더 내의 파일들은 자동 생성되므로 직접 수정하지 마세요. 코드 생성 시 덮어씌워집니다.

관련 의존성

# 코드 생성 도구 (devDependencies)
pnpm add -D @hey-api/openapi-ts

# 런타임 의존성
pnpm add @tanstack/react-query zod axios

참고

• @hey-api/openapi-ts 공식 문서