chore: migrate from openapi-typescript-codegen to @hey-api/openapi-ts

Replace the unmaintained openapi-typescript-codegen with @hey-api/openapi-ts
and @hey-api/client-fetch.

- Replace openapi-typescript-codegen with @hey-api/openapi-ts (dev) and
  @hey-api/client-fetch (runtime)
- Add openapi-ts.config.ts with @hey-api/client-fetch, @hey-api/typescript,
  and @hey-api/sdk plugins
- Switch to flat tree-shakeable functions instead of class-based services
- Update operation_ids to entity-prefixed names (e.g. createTodo, getAllTodos)
- Replace OpenAPI.BASE/TOKEN with client.setConfig({ baseUrl, auth })
- Update useTodoAPI hook to new SDK function signatures
- Add 'generate' npm script for running codegen via pinned dependency
- Update mise task and documentation

Author: einarwar

.mise/tasks/generate.toml

@@ -6,5 +6,6 @@ run = "uv run python -m app open-api"
 
 ["generate:api-client-from-spec"]
 description = "Generate typescript types from the OpenAPI JSON Schema"
+depends = ["generate:openapi-spec"]
 dir = "{{config_root}}/web"
-run = "openapi -i ../api/.openapi.json -o './src/api/generated'"
+run = "yarn install && yarn generate"

.pre-commit-config.yaml

@@ -18,11 +18,9 @@ repos:
       - id: generate-api-client-from-spec
         name: Generate the client for our api
         entry: mise run generate:api-client-from-spec
-        language: node
+        language: system
         files: ^api/.openapi.json$
         pass_filenames: false
-        additional_dependencies:
-          - openapi-typescript-codegen@0.29.0
 
   - repo: https://github.com/compilerla/conventional-pre-commit
     rev: v4.4.0

api/.openapi.json

@@ -16,7 +16,7 @@
                     "todo"
                 ],
                 "summary": "Get Todo All",
-                "operationId": "get_all",
+                "operationId": "getAllTodos",
                 "responses": {
                     "200": {
                         "description": "Successful Response",
@@ -27,7 +27,7 @@
                                         "$ref": "#/components/schemas/GetTodoAllResponse"
                                     },
                                     "type": "array",
-                                    "title": "Response Get All"
+                                    "title": "Response Getalltodos"
                                 }
                             }
                         }
@@ -140,7 +140,7 @@
                     "todo"
                 ],
                 "summary": "Add Todo",
-                "operationId": "create",
+                "operationId": "createTodo",
                 "requestBody": {
                     "content": {
                         "application/json": {
@@ -272,7 +272,7 @@
                     "todo"
                 ],
                 "summary": "Get Todo By Id",
-                "operationId": "get_by_id",
+                "operationId": "getTodoById",
                 "security": [
                     {
                         "OAuth2AuthorizationCodeBearer": []
@@ -403,7 +403,7 @@
                     "todo"
                 ],
                 "summary": "Delete Todo By Id",
-                "operationId": "delete_by_id",
+                "operationId": "deleteTodoById",
                 "security": [
                     {
                         "OAuth2AuthorizationCodeBearer": []
@@ -534,7 +534,7 @@
                     "todo"
                 ],
                 "summary": "Update Todo",
-                "operationId": "update_by_id",
+                "operationId": "updateTodoById",
                 "security": [
                     {
                         "OAuth2AuthorizationCodeBearer": []

api/src/app/features/todo/todo_feature.py

@@ -21,7 +21,7 @@
 router = APIRouter(tags=["todo"], prefix="/todos", route_class=ExceptionHandlingRoute)
 
 
-@router.post("", operation_id="create")
+@router.post("", operation_id="createTodo")
 def add_todo(
     data: AddTodoRequest,
     user: User = Depends(auth_with_jwt),
@@ -30,7 +30,7 @@ def add_todo(
     return add_todo_use_case(data=data, user_id=user.user_id, todo_repository=todo_repository)
 
 
-@router.get("/{id}", operation_id="get_by_id")
+@router.get("/{id}", operation_id="getTodoById")
 def get_todo_by_id(
     id: str,
     user: User = Depends(auth_with_jwt),
@@ -39,7 +39,7 @@ def get_todo_by_id(
     return get_todo_by_id_use_case(id=id, user_id=user.user_id, todo_repository=todo_repository)
 
 
-@router.delete("/{id}", operation_id="delete_by_id")
+@router.delete("/{id}", operation_id="deleteTodoById")
 def delete_todo_by_id(
     id: str,
     user: User = Depends(auth_with_jwt),
@@ -48,14 +48,14 @@ def delete_todo_by_id(
     return delete_todo_use_case(id=id, user_id=user.user_id, todo_repository=todo_repository)
 
 
-@router.get("", operation_id="get_all")
+@router.get("", operation_id="getAllTodos")
 def get_todo_all(
     user: User = Depends(auth_with_jwt), todo_repository: TodoRepositoryInterface = Depends(get_todo_repository)
 ) -> list[GetTodoAllResponse]:
     return get_todo_all_use_case(user_id=user.user_id, todo_repository=todo_repository)  # type: ignore
 
 
-@router.put("/{id}", operation_id="update_by_id")
+@router.put("/{id}", operation_id="updateTodoById")
 def update_todo(
     id: str,
     data: UpdateTodoRequest,

docs/docs/contribute/development-guide/coding/03-generate-api-clients.md

@@ -1,10 +1,10 @@
 # Generate API clients
 
-To generate typescript client for API run:
+To generate the typescript client for the API, run:
 
 ```shell
 cd web
-./generate-api-client.sh
+yarn generate
 ```
 
-This will populate `web/src/api/generated` with new typescript files that matches the API OpenAPI specification.
+This uses the configuration in `web/openapi-ts.config.ts` and populates `web/src/api/generated` with new typescript files that match the API's OpenAPI specification.

web/openapi-ts.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from '@hey-api/openapi-ts'
+
+export default defineConfig({
+  input: '../api/.openapi.json',
+  output: './src/api/generated',
+  plugins: [
+    {
+      name: '@hey-api/client-fetch',
+    },
+    '@hey-api/typescript',
+    '@hey-api/sdk',
+  ],
+})

web/package.json

@@ -7,12 +7,14 @@
     "build": "tsc && vite build",
     "serve": "vite preview",
     "compile": "tsc --noEmit",
+    "generate": "openapi-ts",
     "test": "vitest",
     "lint": "biome check --write --no-errors-on-unmatched"
   },
   "dependencies": {
     "@equinor/eds-core-react": "^2.4.1",
     "@equinor/eds-icons": "^1.3.0",
+    "@hey-api/client-fetch": "^0.7.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-oauth2-code-pkce": "^1.24.0",
@@ -21,6 +23,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.10",
+    "@hey-api/openapi-ts": "^0.82.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -29,7 +32,6 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "jsdom": "^29.0.2",
-    "openapi-typescript-codegen": "^0.30.0",
     "typescript": "~6.0.2",
     "vite": "^8.0.8",
     "vite-plugin-checker": "^0.12.0",
@@ -38,5 +40,10 @@
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.4"
   },
-  "packageManager": "yarn@4.12.0"
+  "packageManager": "yarn@4.12.0",
+  "dependenciesMeta": {
+    "@hey-api/openapi-ts@0.82.5": {
+      "unplugged": true
+    }
+  }
 }

web/src/App.tsx

@@ -1,9 +1,9 @@
 import { Button, Progress, Typography } from '@equinor/eds-core-react'
-import { useContext } from 'react'
+import { useContext, useEffect } from 'react'
 import { AuthContext } from 'react-oauth2-code-pkce'
 import { RouterProvider } from 'react-router-dom'
 import styled from 'styled-components'
-import { OpenAPI } from './api/generated'
+import { client } from './api/generated/client.gen'
 import Header from './common/components/Header'
 import { router } from './router'
 
@@ -22,7 +22,11 @@ const CenterContainer = styled.div`
 function App() {
   const { token, error, logIn, loginInProgress } = useContext(AuthContext)
 
-  OpenAPI.TOKEN = token
+  useEffect(() => {
+    client.setConfig({
+      auth: hasAuthConfig && token ? token : undefined,
+    })
+  }, [token])
 
   if (hasAuthConfig && error) {
     return <CenterContainer>{error}</CenterContainer>

web/src/api/generated/client.gen.ts

@@ -0,0 +1,16 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { ClientOptions } from './types.gen';
+import { type Config, type ClientOptions as DefaultClientOptions, createClient, createConfig } from './client';
+
+/**
+ * The `createClientConfig()` function will be called on client initialization
+ * and the returned object will become the client's initial configuration.
+ *
+ * You may want to initialize your client this way instead of calling
+ * `setConfig()`. This is useful for example if you're using Next.js
+ * to ensure your client always has the correct values.
+ */
+export type CreateClientConfig<T extends DefaultClientOptions = ClientOptions> = (override?: Config<DefaultClientOptions & T>) => Config<Required<DefaultClientOptions> & T>;
+
+export const client = createClient(createConfig<ClientOptions>());