@openapi-qraft/react 1.0.9 → 1.1.0

package/src/callbacks/useInfiniteQuery.ts

@@ -6,13 +6,18 @@ import type { DefaultError, InfiniteData } from '@tanstack/query-core';
 import {
   useInfiniteQuery as useInfiniteQueryBase,
   UseInfiniteQueryResult,
+  useQueryClient,
 } from '@tanstack/react-query';
 
+import { composeInfiniteQueryKey } from '../lib/composeInfiniteQueryKey.js';
 import { shelfMerge } from '../lib/shelfMerge.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
-import { ServiceOperationQuery } from '../ServiceOperation.js';
+import {
+  ServiceOperationInfiniteQueryKey,
+  ServiceOperationQuery,
+} from '../ServiceOperation.js';
 
 export const useInfiniteQuery: <
   TQueryFnData,
@@ -29,20 +34,24 @@ export const useInfiniteQuery: <
     >['useInfiniteQuery']
   >
 ) => UseInfiniteQueryResult<TData, TError> = (qraftOptions, schema, args) => {
-  const [parameters, options, ...restArgs] = args;
+  const [parameters, options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
+  const queryKey: ServiceOperationInfiniteQueryKey<
+    RequestClientSchema,
+    unknown
+  > = Array.isArray(parameters)
+    ? (parameters as never)
+    : composeInfiniteQueryKey(schema, parameters);
+
   return useInfiniteQueryBase(
     {
       ...options,
-      queryKey: [
-        { url: schema.url, method: schema.method, infinite: true },
-        parameters as never,
-      ] as const,
+      queryKey,
       queryFn:
         options?.queryFn ??
         function ({ queryKey: [, queryParams], signal, meta, pageParam }) {
@@ -53,6 +62,6 @@ export const useInfiniteQuery: <
           });
         },
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useMutation.ts

@@ -3,8 +3,11 @@
 import { useContext } from 'react';
 
 import type { DefaultError } from '@tanstack/query-core';
-import type { UseMutationResult } from '@tanstack/react-query';
-import { useMutation as useMutationBase } from '@tanstack/react-query';
+import {
+  useMutation as useMutationBase,
+  UseMutationResult,
+  useQueryClient,
+} from '@tanstack/react-query';
 
 import { composeMutationKey } from '../lib/composeMutationKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
@@ -36,7 +39,7 @@ export const useMutation: <
   schema,
   args
 ) => {
-  const [parameters, options, ...restArgs] = args;
+  const [parameters, options, queryClientByArg] = args;
 
   if (
     parameters &&
@@ -48,8 +51,8 @@ export const useMutation: <
       `'useMutation': parameters and 'options.mutationKey' cannot be used together`
     );
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
@@ -85,6 +88,6 @@ export const useMutation: <
               } as never);
             }),
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useMutationState.ts

@@ -3,8 +3,11 @@
 import { useContext } from 'react';
 
 import type { DefaultError } from '@tanstack/query-core';
-import type { UseMutationResult } from '@tanstack/react-query';
-import { useMutationState as useMutationStateTanstack } from '@tanstack/react-query';
+import {
+  UseMutationResult,
+  useMutationState as useMutationStateTanstack,
+  useQueryClient,
+} from '@tanstack/react-query';
 
 import { composeMutationKey } from '../lib/composeMutationKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
@@ -33,7 +36,7 @@ export const useMutationState: <
   schema,
   args
 ) => {
-  const [options, ...restArgs] = args;
+  const [options, queryClientByArg] = args;
 
   if (
     options?.filters &&
@@ -45,8 +48,8 @@ export const useMutationState: <
     );
   }
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
@@ -68,6 +71,6 @@ export const useMutationState: <
               ),
             },
     } as never,
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useQueries.ts

@@ -5,15 +5,14 @@ import { useContext } from 'react';
 import {
   QueriesResults,
   useQueries as useQueriesTanstack,
+  useQueryClient,
 } from '@tanstack/react-query';
 
+import { composeQueryKey } from '../lib/composeQueryKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
-import {
-  ServiceOperationQuery,
-  ServiceOperationQueryKey,
-} from '../ServiceOperation.js';
+import { ServiceOperationQuery } from '../ServiceOperation.js';
 
 export const useQueries: (
   qraftOptions: QraftClientOptions | undefined,
@@ -22,33 +21,45 @@ export const useQueries: (
     ServiceOperationQuery<RequestClientSchema, unknown, unknown>['useQueries']
   >
 ) => QueriesResults<never> = (qraftOptions, schema, args) => {
-  const [options, ...restArgs] = args;
+  const [options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
   return useQueriesTanstack(
     {
       ...options,
-      queries: options.queries.map(({ parameters, ...queryOptions }) => ({
-        ...queryOptions,
-        queryKey: [
-          { url: schema.url, method: schema.method },
-          parameters,
-        ] satisfies ServiceOperationQueryKey<RequestClientSchema, unknown>,
-        queryFn:
-          queryOptions.queryFn ??
-          function ({ queryKey: [, queryParams], signal, meta }) {
-            return requestClient(schema, {
-              parameters: queryParams as never,
-              signal,
-              meta,
-            });
-          },
-      })),
+      queries: options.queries.map((queryOptions) => {
+        const optionsWithQueryKey =
+          'parameters' in queryOptions
+            ? (() => {
+                const queryOptionsCopy = Object.assign(
+                  {
+                    queryKey: composeQueryKey(schema, queryOptions.parameters),
+                  },
+                  queryOptions
+                );
+                delete queryOptionsCopy.parameters;
+                return queryOptionsCopy;
+              })()
+            : queryOptions;
+
+        return {
+          ...optionsWithQueryKey,
+          queryFn:
+            optionsWithQueryKey.queryFn ??
+            function ({ queryKey: [, queryParams], signal, meta }) {
+              return requestClient(schema, {
+                parameters: queryParams as never,
+                signal,
+                meta,
+              });
+            },
+        };
+      }),
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useQuery.ts

@@ -3,9 +3,13 @@
 import { useContext } from 'react';
 
 import type { DefaultError } from '@tanstack/query-core';
-import type { UseQueryResult } from '@tanstack/react-query';
-import { useQuery as useQueryBase } from '@tanstack/react-query';
+import {
+  useQuery as useQueryTanstack,
+  useQueryClient,
+  UseQueryResult,
+} from '@tanstack/react-query';
 
+import { composeQueryKey } from '../lib/composeQueryKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
@@ -14,30 +18,26 @@ import {
   ServiceOperationQueryKey,
 } from '../ServiceOperation.js';
 
-export const useQuery: <
-  TQueryFnData = unknown,
-  TError = DefaultError,
-  TData = TQueryFnData,
->(
+export const useQuery: <TData = unknown, TError = DefaultError>(
   qraftOptions: QraftClientOptions | undefined,
   schema: RequestClientSchema,
   args: Parameters<
     ServiceOperationQuery<RequestClientSchema, unknown, unknown>['useQuery']
   >
 ) => UseQueryResult<TData, TError> = (qraftOptions, schema, args) => {
-  const [parameters, options, ...restArgs] = args;
+  const [parameters, options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
-  const queryKey: ServiceOperationQueryKey<RequestClientSchema, unknown> = [
-    { url: schema.url, method: schema.method },
-    parameters,
-  ];
+  const queryKey: ServiceOperationQueryKey<RequestClientSchema, unknown> =
+    Array.isArray(parameters)
+      ? (parameters as ServiceOperationQueryKey<RequestClientSchema, unknown>)
+      : composeQueryKey(schema, parameters);
 
-  return useQueryBase(
+  return useQueryTanstack(
     {
       ...options,
       queryKey,
@@ -51,6 +51,6 @@ export const useQuery: <
           });
         },
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useSuspenseInfiniteQuery.ts

@@ -4,17 +4,19 @@ import { useContext } from 'react';
 
 import type { DefaultError, InfiniteData } from '@tanstack/query-core';
 import {
+  useQueryClient,
   useSuspenseInfiniteQuery as useSuspenseInfiniteQueryTanstack,
   UseSuspenseInfiniteQueryResult,
 } from '@tanstack/react-query';
 
+import { composeInfiniteQueryKey } from '../lib/composeInfiniteQueryKey.js';
 import { shelfMerge } from '../lib/shelfMerge.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
 import {
+  ServiceOperationInfiniteQueryKey,
   ServiceOperationQuery,
-  ServiceOperationQueryKey,
 } from '../ServiceOperation.js';
 
 export const useSuspenseInfiniteQuery: <
@@ -36,20 +38,24 @@ export const useSuspenseInfiniteQuery: <
   schema,
   args
 ) => {
-  const [parameters, options, ...restArgs] = args;
+  const [parameters, options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
+  const queryKey: ServiceOperationInfiniteQueryKey<
+    RequestClientSchema,
+    unknown
+  > = Array.isArray(parameters)
+    ? (parameters as never)
+    : composeInfiniteQueryKey(schema, parameters);
+
   return useSuspenseInfiniteQueryTanstack(
     {
       ...options,
-      queryKey: [
-        { url: schema.url, method: schema.method, infinite: true },
-        parameters as never,
-      ] as const,
+      queryKey,
       queryFn:
         options?.queryFn ??
         function ({ queryKey: [, queryParams], signal, meta, pageParam }) {
@@ -60,6 +66,6 @@ export const useSuspenseInfiniteQuery: <
           });
         },
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useSuspenseQueries.ts

@@ -4,16 +4,15 @@ import { useContext } from 'react';
 
 import {
   SuspenseQueriesResults,
+  useQueryClient,
   useSuspenseQueries as useSuspenseQueriesTanstack,
 } from '@tanstack/react-query';
 
+import { composeQueryKey } from '../lib/composeQueryKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
-import {
-  ServiceOperationQuery,
-  ServiceOperationQueryKey,
-} from '../ServiceOperation.js';
+import { ServiceOperationQuery } from '../ServiceOperation.js';
 
 export const useSuspenseQueries: (
   qraftOptions: QraftClientOptions | undefined,
@@ -26,33 +25,45 @@ export const useSuspenseQueries: (
     >['useSuspenseQueries']
   >
 ) => SuspenseQueriesResults<never> = (qraftOptions, schema, args) => {
-  const [options, ...restArgs] = args;
+  const [options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
   return useSuspenseQueriesTanstack(
     {
       ...options,
-      queries: options.queries.map(({ parameters, ...queryOptions }) => ({
-        ...queryOptions,
-        queryKey: [
-          { url: schema.url, method: schema.method },
-          parameters,
-        ] satisfies ServiceOperationQueryKey<RequestClientSchema, unknown>,
-        queryFn:
-          queryOptions.queryFn ??
-          function ({ queryKey: [, queryParams], signal, meta }) {
-            return requestClient(schema, {
-              parameters: queryParams as never,
-              signal,
-              meta,
-            });
-          },
-      })),
+      queries: options.queries.map((queryOptions) => {
+        const optionsWithQueryKey =
+          'parameters' in queryOptions
+            ? (() => {
+                const queryOptionsCopy = Object.assign(
+                  {
+                    queryKey: composeQueryKey(schema, queryOptions.parameters),
+                  },
+                  queryOptions
+                );
+                delete queryOptionsCopy.parameters;
+                return queryOptionsCopy;
+              })()
+            : queryOptions;
+
+        return {
+          ...optionsWithQueryKey,
+          queryFn:
+            optionsWithQueryKey.queryFn ??
+            function ({ queryKey: [, queryParams], signal, meta }) {
+              return requestClient(schema, {
+                parameters: queryParams as never,
+                signal,
+                meta,
+              });
+            },
+        };
+      }),
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/callbacks/useSuspenseQuery.ts

@@ -4,10 +4,12 @@ import { useContext } from 'react';
 
 import type { DefaultError } from '@tanstack/query-core';
 import {
+  useQueryClient,
   UseQueryResult,
   useSuspenseQuery as useSuspenseQueryTanstack,
 } from '@tanstack/react-query';
 
+import { composeQueryKey } from '../lib/composeQueryKey.js';
 import type { QraftClientOptions } from '../qraftAPIClient.js';
 import { QraftContext } from '../QraftContext.js';
 import type { RequestClientSchema } from '../RequestClient.js';
@@ -31,17 +33,17 @@ export const useSuspenseQuery: <
     >['useSuspenseQuery']
   >
 ) => UseQueryResult<TData, TError> = (qraftOptions, schema, args) => {
-  const [parameters, options, ...restArgs] = args;
+  const [parameters, options, queryClientByArg] = args;
 
-  const requestClient = useContext(qraftOptions?.context ?? QraftContext)
-    ?.requestClient;
+  const { requestClient, queryClient: queryClientByContext } =
+    useContext(qraftOptions?.context ?? QraftContext) ?? {};
 
   if (!requestClient) throw new Error(`QraftContext.requestClient not found`);
 
-  const queryKey: ServiceOperationQueryKey<RequestClientSchema, unknown> = [
-    { url: schema.url, method: schema.method },
-    parameters,
-  ];
+  const queryKey: ServiceOperationQueryKey<RequestClientSchema, unknown> =
+    Array.isArray(parameters)
+      ? (parameters as never)
+      : composeQueryKey(schema, parameters);
 
   return useSuspenseQueryTanstack(
     {
@@ -57,6 +59,6 @@ export const useSuspenseQuery: <
           });
         },
     },
-    ...restArgs
+    useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;
 };

package/src/lib/composeInfiniteQueryKey.ts

@@ -0,0 +1,12 @@
+import type { RequestClientSchema } from '../RequestClient.js';
+import { ServiceOperationInfiniteQueryKey } from '../ServiceOperation.js';
+
+export function composeInfiniteQueryKey<
+  TSchema extends RequestClientSchema,
+  TParams,
+>(
+  schema: TSchema,
+  parameters: TParams | undefined
+): ServiceOperationInfiniteQueryKey<TSchema, TParams> {
+  return [{ ...schema, infinite: true }, parameters ?? ({} as TParams)];
+}

package/src/lib/composeQueryKey.ts

@@ -0,0 +1,9 @@
+import type { RequestClientSchema } from '../RequestClient.js';
+import { ServiceOperationQueryKey } from '../ServiceOperation.js';
+
+export function composeQueryKey<TSchema extends RequestClientSchema, TParams>(
+  schema: TSchema,
+  parameters: TParams | undefined
+): ServiceOperationQueryKey<TSchema, TParams> {
+  return [schema, parameters ?? ({} as TParams)];
+}

package/src/lib/createRecursiveProxy.ts

@@ -1,25 +1,46 @@
-type ProxyCallback = (opts: { path: string[]; args: unknown[] }) => unknown;
+type ProxyApplyCallback = (path: string[], args: unknown[]) => unknown;
+/**
+ * @internal
+ * If returns `undefined | null`, the proxy will continue to create a new proxy for the next key.
+ */
+type ProxyGetCallback = (path: string[], key: string) => unknown | undefined;
 
-export function createRecursiveProxy(callback: ProxyCallback, path: string[]) {
-  const proxy: unknown = new Proxy(noop, {
+export function createRecursiveProxy(
+  getCallback: ProxyGetCallback,
+  applyCallback: ProxyApplyCallback,
+  path: string[]
+): unknown {
+  return new Proxy(noop, {
     get(_obj, key) {
       if (typeof key !== 'string' || key === 'then') {
         // special case for if the proxy is accidentally treated
         // like a PromiseLike (like in `Promise.resolve(proxy)`)
         return undefined;
       }
-      return createRecursiveProxy(callback, [...path, key]);
+
+      return (
+        getCallback(path, key) ??
+        createRecursiveProxy(getCallback, applyCallback, [...path, key])
+      );
     },
     apply(_1, _2, args) {
-      const isApply = path[path.length - 1] === 'apply';
-      return callback({
-        args: isApply ? (args.length >= 2 ? args[1] : []) : args,
-        path: isApply ? path.slice(0, -1) : path,
-      });
+      const functionName = path[path.length - 1];
+
+      const isCall = functionName === 'call';
+      const isApply = isCall ? false : functionName === 'apply';
+
+      return applyCallback(
+        isApply || isCall ? path.slice(0, -1) : path,
+        isApply
+          ? args.length >= 2
+            ? args[1]
+            : []
+          : isCall
+            ? args.slice(1)
+            : args
+      );
     },
   });
-
-  return proxy;
 }
 
 function noop() {

package/src/lib/request.ts

@@ -218,8 +218,26 @@ async function getResponseBody<T>(response: Response): Promise<T | undefined> {
   const isJSON =
     contentType?.includes('/json') || contentType?.includes('+json');
 
-  // parse response (falling back to .text() when necessary)
-  if (isJSON) return response.json();
+  if (isJSON) {
+    // attempt to parse JSON for successful responses, otherwise fail
+    if (response.ok) return response.json();
+
+    const errorFallbackResponse = response.clone(); // clone to allow multiple reads
+
+    return response.json().catch(() => {
+      if (
+        typeof process !== 'undefined' &&
+        typeof process.env !== 'undefined' &&
+        process.env.NODE_ENV === 'development'
+      ) {
+        console.warn(
+          'Failed to parse response body as JSON. Falling back to .text()'
+        );
+      }
+      // falling back to .text() when necessary for error messages
+      return errorFallbackResponse.text();
+    });
+  }
 
   return response.text() as Promise<T>;
 }

package/src/qraftAPIClient.ts

@@ -1,6 +1,6 @@
 import { Context } from 'react';
 
-import { createCallbackProxyDecoration } from './lib/createCallbackProxyDecoration.js';
+import { createRecursiveProxy } from './lib/createRecursiveProxy.js';
 import { QraftContextValue } from './QraftContext.js';
 import type { RequestClientSchema } from './RequestClient.js';
 
@@ -16,23 +16,35 @@ export const qraftAPIClient = <
   callbacks: Callbacks,
   options?: QraftClientOptions
 ): ServicesCallbacksFilter<Services, keyof Callbacks> => {
-  return createCallbackProxyDecoration(
-    Object.keys(callbacks),
-    (path, functionName, args) => {
+  return createRecursiveProxy(
+    (getPath, key) => {
+      if (getPath.length !== 2 || key !== 'schema') return;
+
+      const serviceOperation = getByPath(services, getPath);
+      if (!isServiceOperation(serviceOperation))
+        throw new Error(`Service operation not found: ${getPath.join('.')}`);
+      return serviceOperation.schema;
+    },
+    (applyPath, args) => {
+      const path = applyPath.slice(0, -1);
       const serviceOperation = getByPath(services, path);
+
       if (!isServiceOperation(serviceOperation))
         throw new Error(`Service operation not found: ${path.join('.')}`);
 
-      if (functionName in callbacks) {
-        return callbacks[functionName as keyof Callbacks](
-          options,
-          serviceOperation.schema,
-          args
-        );
-      }
+      // The last arg is for instance `.useMutation` or `.useQuery()`
+      const functionName = applyPath[applyPath.length - 1];
 
-      throw new Error(`Not supported API method: ${String(functionName)}`);
-    }
+      if (!(functionName in callbacks))
+        throw new Error(`Function ${functionName} is not supported`);
+
+      return callbacks[functionName as keyof Callbacks](
+        options,
+        serviceOperation.schema,
+        args
+      );
+    },
+    []
   ) as never;
 };
 

package/dist/lib/createCallbackProxyDecoration.d.ts

@@ -1,5 +0,0 @@
-/**
- * Create proxy for decorating procedures
- */
-export declare function createCallbackProxyDecoration<Functions extends string[] | Readonly<string[]>>(functions: Functions, callback: (path: string[], functionName: Functions[number], args: unknown[]) => unknown): unknown;
-//# sourceMappingURL=createCallbackProxyDecoration.d.ts.map

package/dist/lib/createCallbackProxyDecoration.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createCallbackProxyDecoration.d.ts","sourceRoot":"","sources":["../../src/lib/createCallbackProxyDecoration.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,6BAA6B,CAC3C,SAAS,SAAS,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAE/C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,EAAE,EACd,YAAY,EAAE,SAAS,CAAC,MAAM,CAAC,EAC/B,IAAI,EAAE,OAAO,EAAE,KACZ,OAAO,WAoBb"}