@openapi-qraft/react 1.0.0-beta.0

package/src/lib/request.ts

@@ -0,0 +1,252 @@
+/**
+ * @throws {error: object|string, response: Response} if the request fails
+ */
+export async function request<T>(
+  config: { baseUrl: string },
+  requestInit: APIRequestInit,
+  {
+    urlSerializer: urlSerializerFunc,
+    bodySerializer: bodySerializerFunc,
+  }: {
+    urlSerializer: typeof urlSerializer;
+    bodySerializer: typeof bodySerializer;
+  }
+): Promise<T> {
+  const {
+    method,
+    url,
+    parameters,
+    mediaType,
+    headers,
+    body,
+    ...requestInitRest
+  } = requestInit;
+
+  const requestBody = bodySerializerFunc({
+    method,
+    mediaType,
+    body,
+  });
+
+  const response = await fetch(urlSerializerFunc(config, { url, parameters }), {
+    method: method.toUpperCase(),
+    body: requestBody,
+    headers: mergeHeaders(
+      {
+        Accept: 'application/json',
+        'Content-Type': mediaType ?? getBodyContentType(body),
+      },
+      headers,
+      parameters?.header,
+      requestBody instanceof FormData
+        ? // remove `Content-Type` if serialized body is FormData; browser will correctly set Content-Type & boundary expression
+          { 'Content-Type': null }
+        : undefined
+    ),
+    ...requestInitRest,
+  });
+
+  // clone response to allow multiple reads
+  const clonedResponse = response.clone();
+
+  if (!response.ok) {
+    throw await getResponseBody(clonedResponse);
+  }
+
+  return (await getResponseBody(clonedResponse)) as T;
+}
+
+export function urlSerializer(
+  config: { baseUrl: string },
+  { url, parameters }: Pick<APIRequestInit, 'url' | 'parameters'>
+): string {
+  const path = url.replace(/{(.*?)}/g, (substring: string, group: string) => {
+    if (parameters?.path?.hasOwnProperty(group)) {
+      return encodeURI(String(parameters?.path[group]));
+    }
+    return substring;
+  });
+
+  if (parameters?.query) {
+    return `${config.baseUrl}${path}${getQueryString(parameters.query)}`;
+  }
+
+  return `${config.baseUrl}${path}`;
+}
+
+function getQueryString(params: Record<string, any>): string {
+  const qs: string[] = [];
+
+  const append = (key: string, value: any) => {
+    qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+  };
+
+  const process = (key: string, value: any) => {
+    if (typeof value === 'undefined' || value === null) return;
+
+    if (Array.isArray(value)) {
+      value.forEach((v) => {
+        process(key, v);
+      });
+    } else if (typeof value === 'object') {
+      Object.entries(value).forEach(([k, v]) => {
+        process(`${key}[${k}]`, v);
+      });
+    } else {
+      append(key, value);
+    }
+  };
+
+  Object.entries(params).forEach(([key, value]) => {
+    process(key, value);
+  });
+
+  if (qs.length > 0) {
+    return `?${qs.join('&')}`;
+  }
+
+  return '';
+}
+
+function mergeHeaders(...allHeaders: (HeadersOptions | undefined)[]) {
+  const headers = new Headers();
+
+  for (const headerSet of allHeaders) {
+    if (!headerSet || typeof headerSet !== 'object') {
+      continue;
+    }
+
+    const headersIterator =
+      headerSet instanceof Headers
+        ? headerSet.entries()
+        : Object.entries(headerSet);
+
+    for (const [headerKey, headerValue] of headersIterator) {
+      if (headerValue === null) {
+        headers.delete(headerKey);
+      } else if (headerValue !== undefined) {
+        headers.set(headerKey, headerValue);
+      }
+    }
+  }
+
+  return headers;
+}
+
+export function bodySerializer(options: {
+  method: APIRequestInit['method'];
+  mediaType: APIRequestInit['mediaType'];
+  body: APIRequestInit['body'];
+}) {
+  if (options.body === undefined) return;
+
+  if (
+    options.method === 'get' ||
+    options.method === 'head' ||
+    options.method === 'options'
+  )
+    return;
+
+  if (options.mediaType?.includes('/form-data'))
+    return getRequestBodyFormData(options);
+
+  if (
+    !options.mediaType?.includes('/json') &&
+    (typeof options.body === 'string' ||
+      options.body instanceof Blob ||
+      options.body instanceof FormData)
+  ) {
+    return options.body;
+  }
+
+  return JSON.stringify(options.body);
+}
+
+function getRequestBodyFormData({
+  body,
+}: Pick<APIRequestInit, 'body'>): FormData | undefined {
+  if (body instanceof FormData) return body;
+  if (body === null) return;
+
+  if (body instanceof Blob) throw new Error('Blob not supported in form-data');
+  if (body instanceof ArrayBuffer)
+    throw new Error('ArrayBuffer not supported in form-data');
+  if (body instanceof URLSearchParams)
+    throw new Error('URLSearchParams not supported in form-data');
+  if (body instanceof ReadableStream)
+    throw new Error('ReadableStream not supported in form-data');
+  if (typeof body === 'string')
+    throw new Error('String not supported in form-data');
+  if (typeof body !== 'object')
+    throw new Error(`Unsupported body type ${typeof body} in form-data.`);
+
+  const formData = new FormData();
+
+  const process = (key: string, value: any) => {
+    if (typeof value === 'string' || value instanceof Blob) {
+      formData.append(key, value);
+    } else {
+      formData.append(key, JSON.stringify(value));
+    }
+  };
+
+  Object.entries(body)
+    .filter(([_, value]) => typeof value !== 'undefined' && value !== null)
+    .forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((v) => process(key, v));
+      } else {
+        process(key, value);
+      }
+    });
+
+  return formData;
+}
+
+function getBodyContentType(body: APIRequestInit['body']) {
+  if (!body) return;
+  if (body instanceof Blob) return body.type || 'application/octet-stream';
+  if (typeof body === 'string') return 'text/plain';
+  if (!(body instanceof FormData)) return 'application/json';
+}
+
+async function getResponseBody<T>(response: Response): Promise<T | undefined> {
+  if (response.status === 204 || response.headers.get('Content-Length') === '0')
+    return undefined;
+
+  const contentType = response.headers.get('Content-Type')?.toLowerCase();
+  const isJSON =
+    contentType?.includes('/json') || contentType?.includes('+json');
+
+  // parse response (falling back to .text() when necessary)
+  if (isJSON) return response.json();
+
+  return response.text() as Promise<T>;
+}
+
+// To have definitely typed headers without a conversion to stings
+export type HeadersOptions =
+  | HeadersInit
+  | Record<string, string | number | boolean | null | undefined>;
+
+export type APIRequestInit = {
+  readonly method:
+    | 'get'
+    | 'put'
+    | 'post'
+    | 'patch'
+    | 'delete'
+    | 'options'
+    | 'head'
+    | 'trace';
+  readonly url: string;
+  readonly parameters?: {
+    readonly path?: Record<string, any>;
+    readonly cookie?: Record<string, any>;
+    readonly header?: Record<string, any>;
+    readonly query?: Record<string, any>;
+  };
+  readonly body?: BodyInit | Record<string, unknown> | null;
+  readonly mediaType?: string;
+  readonly headers?: HeadersOptions;
+} & Omit<RequestInit, 'headers' | 'method' | 'body'>;

package/src/mocks/handlers.ts

@@ -0,0 +1,252 @@
+import { http, HttpResponse } from 'msw';
+import queryString from 'query-string';
+
+import { Services, services } from '../fixtures/api/index.js';
+
+export const handlers = [
+  http.get<
+    ServicePathParameters<
+      Services['approvalPolicies']['getApprovalPoliciesId']
+    >,
+    undefined,
+    ServiceResponseParameters<
+      Services['approvalPolicies']['getApprovalPoliciesId']
+    >
+  >(
+    openApiToMswPath(
+      services.approvalPolicies.getApprovalPoliciesId.schema.url
+    ),
+    ({ params: { '0': _, ...path }, request }) => {
+      const query = getQueryParameters<
+        Services['approvalPolicies']['getApprovalPoliciesId']
+      >(request.url);
+
+      const header = getHeaders<
+        Services['approvalPolicies']['getApprovalPoliciesId']
+      >(request.headers, 'x-');
+
+      return HttpResponse.json({
+        path,
+        query,
+        header,
+      });
+    }
+  ),
+
+  http.post<
+    ServicePathParameters<Services['entities']['postEntitiesIdDocuments']>,
+    ServiceRequestBodyParameters<
+      Services['entities']['postEntitiesIdDocuments']
+    >,
+    ServiceResponseParameters<Services['entities']['postEntitiesIdDocuments']>
+  >(
+    openApiToMswPath(services.entities.postEntitiesIdDocuments.schema.url),
+    async ({ params: { '0': _, ...path }, request }) => {
+      const query = getQueryParameters<
+        Services['entities']['postEntitiesIdDocuments']
+      >(request.url);
+
+      const header = getHeaders<
+        Services['entities']['postEntitiesIdDocuments']
+      >(request.headers, 'x-');
+
+      const body = await request.json();
+
+      return HttpResponse.json({
+        path,
+        query,
+        header,
+        body,
+      });
+    }
+  ),
+
+  http.post<
+    ServicePathParameters<Services['files']['postFiles']>,
+    ServiceRequestBodyParameters<Services['files']['postFiles']>,
+    ServiceResponseParameters<Services['files']['postFiles']>
+  >(
+    openApiToMswPath(services.files.postFiles.schema.url),
+    async ({ request }) => {
+      const formData = Object.fromEntries(await request.formData()) as Awaited<
+        ReturnType<typeof request.json>
+      >;
+
+      const body: Record<string, any> = {};
+
+      for (const [key, value] of Object.entries(formData)) {
+        // some workaround to make it work, since value instanceof (File | Blob) is not working by some reason
+        if (
+          !value ||
+          typeof value === 'string' ||
+          value.type !== 'application/octet-stream'
+        ) {
+          body[key] = value;
+          continue;
+        }
+        body[key] = (value as File).name;
+      }
+
+      return HttpResponse.json({ body });
+    }
+  ),
+
+  http.get<
+    ServicePathParameters<Services['files']['getFiles']>,
+    undefined,
+    ServiceResponseParameters<Services['files']['getFiles']>
+  >(openApiToMswPath(services.files.getFiles.schema.url), ({ request }) => {
+    const query = getQueryParameters<Services['files']['getFiles']>(
+      request.url
+    );
+
+    const header = getHeaders<Services['files']['getFiles']>(
+      request.headers,
+      'x-'
+    );
+
+    return HttpResponse.json({
+      query,
+      header,
+    });
+  }),
+];
+
+function openApiToMswPath(url: string) {
+  return `*${url.replace(
+    /{(.*?)}/g,
+    (substring: string, group: string) => `:${group}`
+  )}`;
+}
+
+function getQueryParameters<
+  T extends
+    | {
+        getQueryKey: (arg: never) => unknown;
+      }
+    | {
+        getMutationKey: (arg: never) => unknown;
+      },
+>(url: string): ServiceQueryParameters<T> {
+  return queryString.parse(url.split('?')[1]) as ServiceQueryParameters<T>;
+}
+
+function getHeaders<
+  T extends
+    | {
+        getQueryKey: (arg: never) => unknown;
+      }
+    | {
+        getMutationKey: (arg: never) => unknown;
+      },
+>(headers: Headers, prefix: string): ServiceHeaderParameters<T> {
+  return Array.from(headers.entries()).reduce(
+    (acc, [headerKey, headerValue]) => {
+      if (!headerKey.toLowerCase().startsWith(prefix.toLowerCase())) return acc;
+      if (typeof headerValue !== 'string') return acc;
+      return {
+        ...acc,
+        [headerKey]: headerValue,
+      };
+    },
+    {} as Record<string, string>
+  ) as ServiceHeaderParameters<T>;
+}
+
+type ServiceHeaderParameters<
+  T extends
+    | {
+        getQueryKey: (arg: never) => unknown;
+      }
+    | {
+        getMutationKey: (arg: never) => unknown;
+      },
+> = T extends {
+  getQueryKey: (arg: infer QueryKey) => unknown;
+}
+  ? QueryKey extends { header?: infer Parameters }
+    ? Parameters
+    : unknown
+  : T extends {
+        getMutationKey: (arg: infer MutationKey) => unknown;
+      }
+    ? MutationKey extends { header?: infer Parameters }
+      ? Parameters
+      : unknown
+    : never;
+
+type ServicePathParameters<
+  T extends
+    | {
+        getQueryKey: (arg: never) => unknown;
+      }
+    | {
+        getMutationKey: (arg: never) => unknown;
+      },
+> = T extends {
+  getQueryKey: (arg: infer QueryKey) => unknown;
+}
+  ? QueryKey extends { path?: infer Parameters }
+    ? Parameters & { 0: string }
+    : {}
+  : T extends {
+        getMutationKey: (arg: infer MutationKey) => unknown;
+      }
+    ? MutationKey extends { path?: infer Parameters }
+      ? Parameters & { 0: string }
+      : {}
+    : never;
+
+type ServiceQueryParameters<
+  T extends
+    | {
+        getQueryKey: (arg: never) => unknown;
+      }
+    | {
+        getMutationKey: (arg: never) => unknown;
+      },
+> = T extends {
+  getQueryKey: (arg: infer QueryKey) => unknown;
+}
+  ? QueryKey extends { query?: infer Parameters }
+    ? Parameters
+    : unknown
+  : T extends {
+        getMutationKey: (arg: infer MutationKey) => unknown;
+      }
+    ? MutationKey extends { query?: infer Parameters }
+      ? Parameters
+      : unknown
+    : never;
+
+type ServiceRequestBodyParameters<
+  T extends {
+    mutationFn: (...args: never[]) => unknown;
+  },
+> = T extends {
+  mutationFn: (...args: never[]) => unknown;
+}
+  ? Parameters<T['mutationFn']>[1] extends infer Options
+    ? Options extends { body: infer Body }
+      ? Body
+      : never
+    : never
+  : never;
+
+type ServiceResponseParameters<
+  T extends
+    | {
+        queryFn: (...args: never[]) => unknown;
+      }
+    | {
+        mutationFn: (...args: never[]) => unknown;
+      },
+> = T extends {
+  queryFn: (...args: never[]) => unknown;
+}
+  ? Awaited<ReturnType<T['queryFn']>>
+  : T extends {
+        mutationFn: (...args: never[]) => unknown;
+      }
+    ? Awaited<ReturnType<T['mutationFn']>>
+    : never;

package/src/mocks/node.ts

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node';
+
+import { handlers } from './handlers.js';
+
+export const server = setupServer(...handlers);