feat: generate OpenAPI TypeScript client for Next.js frontend

Author: athrael-soju

.env

@@ -43,3 +43,4 @@ SENTRY_DSN=
 # Configure these with your own Docker registry images
 DOCKER_IMAGE_BACKEND=backend
 DOCKER_IMAGE_FRONTEND=frontend
+DOCKER_IMAGE_FRONTEND_NEXTJS=frontend-nextjs

frontend-nextjs/src/client/core/ApiError.ts

@@ -1,5 +1,5 @@
-import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { ApiResult } from './ApiResult';
+import type { ApiRequestOptions } from "./ApiRequestOptions";
+import type { ApiResult } from "./ApiResult";
 
 export class ApiError extends Error {
 	public readonly url: string;
@@ -8,14 +8,18 @@ export class ApiError extends Error {
 	public readonly body: unknown;
 	public readonly request: ApiRequestOptions;
 
-	constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
+	constructor(
+		request: ApiRequestOptions,
+		response: ApiResult,
+		message: string,
+	) {
 		super(message);
 
-		this.name = 'ApiError';
+		this.name = "ApiError";
 		this.url = response.url;
 		this.status = response.status;
 		this.statusText = response.statusText;
 		this.body = response.body;
 		this.request = request;
 	}
-}
+}

frontend-nextjs/src/client/core/ApiRequestOptions.ts

@@ -6,16 +6,16 @@ export type ApiRequestOptions<T = unknown> = {
 	readonly headers?: Record<string, unknown>;
 	readonly mediaType?: string;
 	readonly method:
-		| 'DELETE'
-		| 'GET'
-		| 'HEAD'
-		| 'OPTIONS'
-		| 'PATCH'
-		| 'POST'
-		| 'PUT';
+		| "DELETE"
+		| "GET"
+		| "HEAD"
+		| "OPTIONS"
+		| "PATCH"
+		| "POST"
+		| "PUT";
 	readonly path?: Record<string, unknown>;
 	readonly query?: Record<string, unknown>;
 	readonly responseHeader?: string;
 	readonly responseTransformer?: (data: unknown) => Promise<T>;
 	readonly url: string;
-};
+};

frontend-nextjs/src/client/core/ApiResult.ts

@@ -4,4 +4,4 @@ export type ApiResult<TData = any> = {
 	readonly status: number;
 	readonly statusText: string;
 	readonly url: string;
-};
+};

frontend-nextjs/src/client/core/CancelablePromise.ts

@@ -1,7 +1,7 @@
 export class CancelError extends Error {
 	constructor(message: string) {
 		super(message);
-		this.name = 'CancelError';
+		this.name = "CancelError";
 	}
 
 	public get isCancelled(): boolean {
@@ -30,8 +30,8 @@ export class CancelablePromise<T> implements Promise<T> {
 		executor: (
 			resolve: (value: T | PromiseLike<T>) => void,
 			reject: (reason?: unknown) => void,
-			onCancel: OnCancel
-		) => void
+			onCancel: OnCancel,
+		) => void,
 	) {
 		this._isResolved = false;
 		this._isRejected = false;
@@ -64,15 +64,15 @@ export class CancelablePromise<T> implements Promise<T> {
 				this.cancelHandlers.push(cancelHandler);
 			};
 
-			Object.defineProperty(onCancel, 'isResolved', {
+			Object.defineProperty(onCancel, "isResolved", {
 				get: (): boolean => this._isResolved,
 			});
 
-			Object.defineProperty(onCancel, 'isRejected', {
+			Object.defineProperty(onCancel, "isRejected", {
 				get: (): boolean => this._isRejected,
 			});
 
-			Object.defineProperty(onCancel, 'isCancelled', {
+			Object.defineProperty(onCancel, "isCancelled", {
 				get: (): boolean => this._isCancelled,
 			});
 
@@ -86,13 +86,13 @@ export class CancelablePromise<T> implements Promise<T> {
 
 	public then<TResult1 = T, TResult2 = never>(
 		onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
-		onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null
+		onRejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
 	): Promise<TResult1 | TResult2> {
 		return this.promise.then(onFulfilled, onRejected);
 	}
 
 	public catch<TResult = never>(
-		onRejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null
+		onRejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null,
 	): Promise<T | TResult> {
 		return this.promise.catch(onRejected);
 	}
@@ -112,15 +112,15 @@ export class CancelablePromise<T> implements Promise<T> {
 					cancelHandler();
 				}
 			} catch (error) {
-				console.warn('Cancellation threw an error', error);
+				console.warn("Cancellation threw an error", error);
 				return;
 			}
 		}
 		this.cancelHandlers.length = 0;
-		if (this._reject) this._reject(new CancelError('Request aborted'));
+		if (this._reject) this._reject(new CancelError("Request aborted"));
 	}
 
 	public get isCancelled(): boolean {
 		return this._isCancelled;
 	}
-}
+}

frontend-nextjs/src/client/core/OpenAPI.ts

@@ -1,32 +1,32 @@
-import type { AxiosRequestConfig, AxiosResponse } from 'axios';
-import type { ApiRequestOptions } from './ApiRequestOptions';
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
+import type { ApiRequestOptions } from "./ApiRequestOptions";
 
 type Headers = Record<string, string>;
 type Middleware<T> = (value: T) => T | Promise<T>;
 type Resolver<T> = (options: ApiRequestOptions<T>) => Promise<T>;
 
 export class Interceptors<T> {
-  _fns: Middleware<T>[];
+	_fns: Middleware<T>[];
 
-  constructor() {
-    this._fns = [];
-  }
+	constructor() {
+		this._fns = [];
+	}
 
-  eject(fn: Middleware<T>): void {
-    const index = this._fns.indexOf(fn);
-    if (index !== -1) {
-      this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
-    }
-  }
+	eject(fn: Middleware<T>): void {
+		const index = this._fns.indexOf(fn);
+		if (index !== -1) {
+			this._fns = [...this._fns.slice(0, index), ...this._fns.slice(index + 1)];
+		}
+	}
 
-  use(fn: Middleware<T>): void {
-    this._fns = [...this._fns, fn];
-  }
+	use(fn: Middleware<T>): void {
+		this._fns = [...this._fns, fn];
+	}
 }
 
 export type OpenAPIConfig = {
 	BASE: string;
-	CREDENTIALS: 'include' | 'omit' | 'same-origin';
+	CREDENTIALS: "include" | "omit" | "same-origin";
 	ENCODE_PATH?: ((path: string) => string) | undefined;
 	HEADERS?: Headers | Resolver<Headers> | undefined;
 	PASSWORD?: string | Resolver<string> | undefined;
@@ -41,17 +41,17 @@ export type OpenAPIConfig = {
 };
 
 export const OpenAPI: OpenAPIConfig = {
-	BASE: '',
-	CREDENTIALS: 'include',
+	BASE: "",
+	CREDENTIALS: "include",
 	ENCODE_PATH: undefined,
 	HEADERS: undefined,
 	PASSWORD: undefined,
 	TOKEN: undefined,
 	USERNAME: undefined,
-	VERSION: '0.1.0',
+	VERSION: "0.1.0",
 	WITH_CREDENTIALS: false,
 	interceptors: {
 		request: new Interceptors(),
 		response: new Interceptors(),
 	},
-};
+};