@openapi-qraft/react 2.0.0-next.1 → 2.0.0-next.11

package/src/lib/requestFn.ts

@@ -1,3 +1,12 @@
+import type {
+  HeadersOptions,
+  OperationSchema,
+  RequestFnInfo,
+  RequestFnOptions,
+  RequestFnResponse,
+} from '@openapi-qraft/tanstack-query-react-types';
+import { processResponse, resolveResponse } from './responseUtils.js';
+
 /**
  * This function is used to make a request to a specified endpoint.
  *
@@ -25,7 +34,7 @@ export async function requestFn<TData, TError>(
 
 /**
  * This function is used to make a request to a specified endpoint.
- * It's needed to create a custom `requestFn` with a custom `urlSerializer`
+ * It's necessary to create a custom `requestFn` with a custom `urlSerializer`
  * and `bodySerializer`, with the tree-shaking of the default `requestFn`
  * and its serializers.
  *
@@ -46,24 +55,18 @@ export async function baseRequestFn<TData, TError>(
 ): Promise<RequestFnResponse<TData, TError>> {
   const { parameters, headers, body, ...requestInfoRest } = requestInfo;
 
-  const requestBody = options.bodySerializer(requestSchema, requestInfo);
+  const requestPayload = options.bodySerializer(requestSchema, body);
 
   const baseFetch = options.fetch ?? fetch;
 
   return baseFetch(options.urlSerializer(requestSchema, requestInfo), {
     method: requestSchema.method.toUpperCase(),
-    body: requestBody,
+    body: requestPayload?.body,
     headers: mergeHeaders(
-      {
-        Accept: 'application/json',
-        'Content-Type': requestSchema.mediaType ?? getBodyContentType(body),
-      },
+      { Accept: 'application/json' },
+      requestPayload?.headers,
       headers,
-      parameters?.header,
-      requestBody instanceof FormData
-        ? // remove `Content-Type` if the serialized body is FormData; the browser will correctly set Content-Type & boundary expression
-          { 'Content-Type': null }
-        : undefined
+      parameters?.header
     ),
     ...requestInfoRest,
   })
@@ -88,7 +91,7 @@ export async function baseRequestFn<TData, TError>(
  */
 export function urlSerializer(
   schema: OperationSchema,
-  info: RequestFnPayload
+  info: Pick<RequestFnInfo, 'baseUrl' | 'parameters'>
 ): string {
   const path = schema.url.replace(
     /{(.*?)}/g,
@@ -173,47 +176,101 @@ export function mergeHeaders(...allHeaders: (HeadersOptions | undefined)[]) {
 
 export function bodySerializer(
   schema: OperationSchema,
-  info: RequestFnPayload
+  body: RequestFnInfo['body']
 ) {
-  if (info.body === undefined) return;
-
   if (
     schema.method === 'get' ||
     schema.method === 'head' ||
     schema.method === 'options'
   )
-    return;
+    return undefined;
+
+  if (body === undefined || body === null) return undefined;
+
+  if (typeof body === 'string') {
+    return {
+      body,
+      headers: {
+        'Content-Type':
+          // prefer text/* media type
+          schema.mediaType?.find((mediaType) => mediaType.includes('text/')) ??
+          // prefer JSON media type, assume that body is serialized as JSON
+          schema.mediaType?.find((mediaType) => mediaType.includes('/json')) ??
+          'text/plain',
+      },
+    };
+  }
 
-  if (schema.mediaType?.includes('/form-data'))
-    return getRequestBodyFormData(info);
+  if (body instanceof FormData) {
+    return {
+      body,
+      headers: {
+        // remove `Content-Type` if the serialized body is FormData;
+        // the browser will correctly set Content-Type & boundary expression
+        'Content-Type': null,
+      },
+    };
+  }
 
-  if (
-    !schema.mediaType?.includes('/json') &&
-    (typeof info.body === 'string' ||
-      info.body instanceof Blob ||
-      info.body instanceof FormData)
-  ) {
-    return info.body;
+  if (body instanceof Blob) {
+    return {
+      body,
+      headers: {
+        'Content-Type':
+          body.type ||
+          schema.mediaType?.find(
+            (mediaType) =>
+              !(
+                mediaType.includes('text/') &&
+                mediaType.includes('/form-data') &&
+                mediaType.includes('/json')
+              )
+          ) ||
+          'application/octet-stream',
+      },
+    };
   }
 
-  return JSON.stringify(info.body);
+  let jsonMediaType: string | null = null;
+  let formDataMediaType: string | null = null;
+
+  if (schema.mediaType) {
+    for (let i = 0; i < schema.mediaType.length; i++) {
+      const mediaType = schema.mediaType[i];
+      if (mediaType.includes('/json')) jsonMediaType = mediaType;
+      else if (mediaType.includes('/form-data')) formDataMediaType = mediaType;
+    }
+  }
+
+  if (formDataMediaType) {
+    if (
+      !jsonMediaType ||
+      // Prefer FormData serialization if one of the fields is a Blob
+      Object.values(body).some((value) => value instanceof Blob)
+    ) {
+      return {
+        body: getRequestBodyFormData(body),
+        headers: {
+          // remove `Content-Type` if the serialized body is FormData;
+          // the browser will correctly set Content-Type & boundary expression
+          'Content-Type': null,
+        },
+      };
+    }
+  }
+
+  return {
+    body: JSON.stringify(body),
+    headers: {
+      'Content-Type': jsonMediaType ?? 'application/json',
+    },
+  };
 }
 
-function getRequestBodyFormData({
-  body,
-}: Pick<RequestFnPayload, 'body'>): FormData | undefined {
+function getRequestBodyFormData(
+  body: NonNullable<RequestFnInfo['body']>
+): FormData {
   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.`);
 
@@ -240,187 +297,20 @@ function getRequestBodyFormData({
   return formData;
 }
 
-function getBodyContentType(body: RequestFnPayload['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 processResponse<TData, TError>(
-  response: Response
-): Promise<RequestFnResponse<TData, TError>> {
-  if (response.status === 204 || response.headers.get('Content-Length') === '0')
-    return (
-      response.ok ? { data: {}, response } : { error: {}, response }
-    ) as RequestFnResponse<TData, TError>;
-
-  if (isJsonResponse(response)) {
-    // clone response before parsing every time to allow multiple reads
-    const jsonResponse = response.clone().json();
-    return resolveResponse(
-      response,
-      response.ok ? jsonResponse : Promise.reject(await jsonResponse)
-    );
-  }
-
-  const jsonResponse = new Promise<TData>((resolve, reject) =>
-    // attempt to parse JSON for successful responses, otherwise fail
-    response.clone().text().then(JSON.parse).then(resolve, reject)
-  );
-
-  return resolveResponse(
-    response,
-    response.ok ? jsonResponse : Promise.reject(await jsonResponse)
-  );
-}
-
-function isJsonResponse(response: Response) {
-  const contentType = response.headers.get('Content-Type')?.toLowerCase();
-  return contentType?.includes('/json') || contentType?.includes('+json');
-}
-
-function resolveResponse<TData, TError>(
-  error: Error
-): Promise<RequestFnResponse<TData, TError>>;
-function resolveResponse<TData, TError>(
-  responseToReturn: Response,
-  responsePromise: Promise<TData>
-): Promise<RequestFnResponse<TData, TError>>;
-function resolveResponse<TData, TError>(
-  responseToReturn: Response | Error,
-  responsePromise?: Promise<TData>
-): Promise<RequestFnResponse<TData, TError>> {
-  if (!responsePromise)
-    return Promise.reject({
-      error: responseToReturn,
-      response: undefined,
-      data: undefined,
-    });
-
-  return responsePromise
-    .then(
-      (data) =>
-        ({ data, response: responseToReturn }) as RequestFnResponse<
-          TData,
-          TError
-        >
-    )
-    .catch(
-      (error) =>
-        ({ error, response: responseToReturn }) as RequestFnResponse<
-          TData,
-          TError
-        >
-    );
-}
-
-// To have definitely typed headers without a conversion to stings
-export type HeadersOptions =
-  | HeadersInit
-  | Record<string, string | number | boolean | null | undefined>;
-
-export interface OperationSchema {
-  /**
-   * Operation path
-   * @example /user/{id}
-   */
-  readonly url: string; //todo::rename to `path`
-
-  /**
-   * Operation method
-   */
-  readonly method:
-    | 'get'
-    | 'put'
-    | 'post'
-    | 'patch'
-    | 'delete'
-    | 'options'
-    | 'head'
-    | 'trace';
-
-  /**
-   * Media type of the request body
-   * @example application/json
-   */
-  readonly mediaType?: string;
-
-  readonly security?: string[];
-}
-
-export interface RequestFnPayload {
-  /**
-   * Base URL to use for the request
-   * @example 'https://api.example.com'
-   */
-  baseUrl?: string;
-
-  /**
-   * OpenAPI parameters
-   * @example
-   * ```ts
-   * { path: {id: 1}, query: {search: 'hello'} }
-   * ```
-   */
-  readonly parameters?: {
-    readonly path?: Record<string, any>;
-    readonly header?: Record<string, any>;
-    readonly query?: Record<string, any>;
-  };
-
-  /**
-   * Request body
-   * @example { name: 'John' }
-   */
-  readonly body?: BodyInit | Record<string, unknown> | null;
-
-  /**
-   * Tanstack Query Meta
-   */
-  meta?: Record<string, unknown>;
-
-  /** An AbortSignal to set request's signal. */
-  signal?: AbortSignal | null;
-}
-
-export interface RequestFnInfo
-  extends RequestFnPayload,
-    Omit<RequestInit, 'headers' | 'method' | 'body' | 'signal'> {
-  /**
-   * Request headers
-   * @example { 'X-Auth': '123' }
-   */
-  readonly headers?: HeadersOptions;
-}
-
-export interface RequestFnOptions {
-  urlSerializer?: typeof urlSerializer;
-  bodySerializer?: typeof bodySerializer;
-  fetch?: typeof fetch;
-}
-
-export type RequestFn<TData, TError> = typeof requestFn<TData, TError>;
-
-export type RequestFnResponse<TData, TError> =
-  | {
-      data?: TData;
-      response: Response;
-      error?: never;
-    }
-  | {
-      // server error
-      error?: TError | Error;
-      response: Response;
-      data?: never;
-    }
-  | {
-      // network error
-      error?: Error;
-      data?: never;
-      response?: never;
-    };
-
 type WithRequired<T, K extends keyof T> = T & {
   [_ in K]: {};
 };
+
+export type {
+  RequestFn,
+  RequestFnResponse,
+  HeadersOptions,
+  RequestFnOptions,
+  RequestFnInfo,
+  OperationSchema,
+} from '@openapi-qraft/tanstack-query-react-types';
+
+/**
+ * @deprecated use `RequestFnInfo` instead
+ */
+export type RequestFnPayload = RequestFnInfo;

package/src/lib/responseUtils.ts

@@ -0,0 +1,77 @@
+import type { RequestFnResponse } from '@openapi-qraft/tanstack-query-react-types';
+
+/**
+ * Processes the response from the server.
+ * @beta
+ */
+export async function processResponse<TData, TError>(
+  response: Response
+): Promise<RequestFnResponse<TData, TError>> {
+  if (response.status === 204 || response.headers.get('Content-Length') === '0')
+    return (
+      response.ok ? { data: {}, response } : { error: {}, response }
+    ) as RequestFnResponse<TData, TError>;
+
+  if (isJsonResponse(response)) {
+    // clone response before parsing every time to allow multiple reads
+    const jsonResponse = response.clone().json();
+    return resolveResponse(
+      response,
+      response.ok ? jsonResponse : Promise.reject(await jsonResponse)
+    );
+  }
+
+  const jsonResponse = new Promise<TData>((resolve, reject) =>
+    // attempt to parse JSON for successful responses, otherwise fail
+    response.clone().text().then(JSON.parse).then(resolve, reject)
+  );
+
+  return resolveResponse(
+    response,
+    response.ok ? jsonResponse : Promise.reject(await jsonResponse)
+  );
+}
+
+/**
+ * Resolves the response from the server.
+ * @beta
+ */
+export function resolveResponse<TData, TError>(
+  error: Error
+): Promise<RequestFnResponse<TData, TError>>;
+export function resolveResponse<TData, TError>(
+  responseToReturn: Response,
+  responsePromise: Promise<TData>
+): Promise<RequestFnResponse<TData, TError>>;
+export function resolveResponse<TData, TError>(
+  responseToReturn: Response | Error,
+  responsePromise?: Promise<TData>
+): Promise<RequestFnResponse<TData, TError>> {
+  if (!responsePromise)
+    return Promise.reject({
+      error: responseToReturn,
+      response: undefined,
+      data: undefined,
+    });
+
+  return responsePromise
+    .then(
+      (data) =>
+        ({ data, response: responseToReturn }) as RequestFnResponse<
+          TData,
+          TError
+        >
+    )
+    .catch(
+      (error) =>
+        ({ error, response: responseToReturn }) as RequestFnResponse<
+          TData,
+          TError
+        >
+    );
+}
+
+function isJsonResponse(response: Response) {
+  const contentType = response.headers.get('Content-Type')?.toLowerCase();
+  return contentType?.includes('/json') || contentType?.includes('+json');
+}

package/src/lib/useComposeUseQueryOptions.ts

@@ -1,9 +1,9 @@
 'use client';
 
+import type { ServiceOperationQueryKey } from '@openapi-qraft/tanstack-query-react-types';
 import type { QueryClient } from '@tanstack/query-core';
 import type { UseQueryOptions } from '@tanstack/react-query';
 import type { CreateAPIQueryClientOptions } from '../qraftAPIClient.js';
-import type { ServiceOperationQueryKey } from '../service-operation/ServiceOperationKey.js';
 import type { OperationSchema } from './requestFn.js';
 import { composeInfiniteQueryKey } from './composeInfiniteQueryKey.js';
 import { composeQueryKey } from './composeQueryKey.js';
@@ -24,7 +24,6 @@ export function useComposeUseQueryOptions(
 
   const queryFn =
     options?.queryFn ??
-    // @ts-expect-error - Too complex to type
     function ({ queryKey: [, queryParams], signal, meta, pageParam }) {
       return qraftOptions
         .requestFn(schema, {

package/src/migrate-to-v2-codemod.ts

@@ -0,0 +1,118 @@
+import {
+  API,
+  ASTPath,
+  CallExpression,
+  FileInfo,
+  MemberExpression,
+  Options,
+} from 'jscodeshift';
+
+export default function transformer(
+  file: FileInfo,
+  api: API,
+  options: Options
+) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const methodNames = [
+    'fetchQuery',
+    'fetchInfiniteQuery',
+    'prefetchQuery',
+    'prefetchInfiniteQuery',
+    'getQueryData',
+    'getQueriesData',
+    'setQueryData',
+    'getQueryState',
+    'setQueriesData',
+    'invalidateQueries',
+    'refetchQueries',
+    'cancelQueries',
+    'removeQueries',
+    'resetQueries',
+    'isFetching',
+    'isMutating',
+    'setInfiniteQueryData',
+    'getInfiniteQueryData',
+    'getInfiniteQueryState',
+  ];
+
+  const hooksWithTwoArgs = [
+    'useSuspenseQueries',
+    'useIsFetching',
+    'useMutationState',
+    'useIsMutating',
+  ];
+
+  const hooksWithThreeArgs = [
+    'useQuery',
+    'useMutation',
+    'useInfiniteQuery',
+    'useQueries',
+    'useSuspenseQuery',
+    'useSuspenseInfiniteQuery',
+  ];
+
+  const apiClientVariableNames = getAPIClientVariableNames(options);
+
+  return root
+    .find(j.CallExpression)
+    .forEach((path: ASTPath<CallExpression>) => {
+      const callee = path.node.callee;
+      if (callee.type === 'MemberExpression') {
+        const apiClientCallMethodName = getAPIClientCallMethodName(
+          callee,
+          apiClientVariableNames
+        );
+        if (apiClientCallMethodName) {
+          if (methodNames.includes(apiClientCallMethodName)) {
+            // Remove the last argument `queryClient`
+            path.node.arguments = path.node.arguments.slice(0, -1);
+          } else if (
+            hooksWithTwoArgs.includes(apiClientCallMethodName) &&
+            path.node.arguments.length === 2
+          ) {
+            // Remove the second argument for specific hooks if there are exactly two arguments
+            path.node.arguments = path.node.arguments.slice(0, 1);
+          } else if (
+            hooksWithThreeArgs.includes(apiClientCallMethodName) &&
+            path.node.arguments.length === 3
+          ) {
+            // Remove the third argument for specific hooks if there are exactly three arguments
+            path.node.arguments = path.node.arguments.slice(0, 2);
+          }
+        }
+      }
+    })
+    .toSource();
+}
+
+function getAPIClientCallMethodName(
+  node: MemberExpression,
+  apiClientNames: string[]
+): string | undefined {
+  if (
+    node.object.type === 'MemberExpression' &&
+    node.object.object.type === 'MemberExpression' &&
+    node.object.object.object.type === 'Identifier' &&
+    node.object.object.property.type === 'Identifier' &&
+    node.object.property.type === 'Identifier' &&
+    node.property.type === 'Identifier'
+  ) {
+    const apiClientVariableName = node.object.object.object.name;
+
+    if (apiClientNames.includes(apiClientVariableName))
+      return node.property.name;
+  }
+}
+
+function getAPIClientVariableNames(options: Options) {
+  const apiClientVariableNameOption = options['api-client-variable-name'];
+
+  if (!apiClientVariableNameOption) return ['api', 'qraft'];
+
+  return String(apiClientVariableNameOption)
+    .split(',')
+    .map((name) => name.trim())
+    .filter(Boolean);
+}