Генерация API

Установка

https://heyapi.dev/openapi-ts/get-started#installation

pnpm add @hey-api/client-fetch && pnpm add @hey-api/openapi-ts -D

package.json

{
  "scripts": {
    "generate-api": "openapi-ts"
  }
}

Vite

.env

VITE_API_SWAGGER=https://api.spaceapp.ru/swagger.json
VITE_API_URL=https://api.spaceapp.ru

openapi-ts.config.ts

import { defaultPlugins, defineConfig } from "@hey-api/openapi-ts";
import { loadEnv } from "vite";

export default defineConfig({
  input: loadEnv("production", process.cwd()).VITE_API_SWAGGER,
  output: "src/shared/api/generated",
  plugins: [
    ...defaultPlugins,
    { name: "@hey-api/client-fetch" },
    { name: "@tanstack/react-query" },
    { name: "@hey-api/typescript", enums: "typescript" },
    { name: "@hey-api/sdk" },
  ],
});

Next.js

pnpm add @next/env

.env

NEXT_API_SWAGGER=https://api.spaceapp.ru/swagger.json
NEXT_PUBLIC_API_URL=https://api.spaceapp.ru

envConfig.ts

import { loadEnvConfig } from "@next/env";

const projectDir = process.cwd();
loadEnvConfig(projectDir);

openapi-ts.config.ts

import { defaultPlugins, defineConfig } from "@hey-api/openapi-ts";
import "./envConfig.ts";

export default defineConfig({
  input: process.env.NEXT_API_SWAGGER!,
  output: "src/shared/api/generated",
  plugins: [
    ...defaultPlugins,
    { name: "@hey-api/client-fetch" },
    { name: "@tanstack/react-query" },
    { name: "@hey-api/typescript", enums: "typescript" },
    { name: "@hey-api/sdk" },
  ],
});

Генерация API

pnpm generate-api

Export

src/shared/api/index.ts

export * from "./generated";
export * from "./generated/@tanstack/react-query.gen";

Client Setup

https://heyapi.dev/openapi-ts/clients/fetch

src/shared/lib/api/api-client.ts

import { createClient } from "@hey-api/client-fetch";

/**
 * Fetch клиент для API, пробрасывается в хуки Tanstack Query
 */
export const apiClient = createClient({
  // Vite
  baseUrl: import.meta.env.VITE_API_URL,
  // Next.js
  baseUrl: process.env.NEXT_PUBLIC_API_URL,
});

apiClient.interceptors.request.use((config) => {
  return config;
});

apiClient.interceptors.response.use(async (res) => {
  return res;
});

Пример использования с TanStackQuery

src/shared/lib/api/products/use-get-products.ts

import { GetV1ProductsData, getV1ProductsOptions } from "@/shared/api";
import { apiClient } from "@/shared/lib";
import { Options } from "@hey-api/client-fetch";
import { useQuery } from "@tanstack/react-query";

export const useGetProducts = (options?: Options<GetV1ProductsData>) =>
  useQuery(getV1ProductsOptions({ client: apiClient, ...options }));

products-component.ts

import { useGetProducts } from "@/shared/lib";
---
const { data } = useGetProducts();