@openapi-qraft/react 1.0.10 → 1.1.0

package/src/callbacks/useSuspenseQueries.ts

@@ -8,13 +8,11 @@ import {
   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,
@@ -37,22 +35,34 @@ export const useSuspenseQueries: (
   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,
+              });
+            },
+        };
+      }),
     },
     useQueryClient(queryClientByArg ?? queryClientByContext)
   ) as never;

package/src/callbacks/useSuspenseQuery.ts

@@ -9,6 +9,7 @@ import {
   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';
@@ -39,10 +40,10 @@ export const useSuspenseQuery: <
 
   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(
     {

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"}

package/dist/lib/createCallbackProxyDecoration.js

@@ -1,21 +0,0 @@
-import { createRecursiveProxy } from './createRecursiveProxy.js';
-/**
- * Create proxy for decorating procedures
- */
-export function createCallbackProxyDecoration(functions, callback) {
-    return createRecursiveProxy((opts) => {
-        const path = opts.path.slice(0, -1);
-        // The last arg is for instance `.useMutation` or `.useQuery()`
-        const functionName = opts.path[opts.path.length - 1];
-        if (functionName === '_def') {
-            return {
-                path: path,
-            };
-        }
-        if (!functions.includes(functionName)) {
-            throw new Error(`Function ${functionName} is not supported`);
-        }
-        return callback(path, functionName, opts.args);
-    }, []);
-}
-//# sourceMappingURL=createCallbackProxyDecoration.js.map

package/dist/lib/createCallbackProxyDecoration.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"createCallbackProxyDecoration.js","sourceRoot":"","sources":["../../src/lib/createCallbackProxyDecoration.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE;;GAEG;AACH,MAAM,UAAU,6BAA6B,CAG3C,SAAoB,EACpB,QAIY;IAEZ,OAAO,oBAAoB,CAAC,CAAC,IAAI,EAAE,EAAE;QACnC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAEpC,+DAA+D;QAC/D,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAErD,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;YAC5B,OAAO;gBACL,IAAI,EAAE,IAAI;aACX,CAAC;QACJ,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;YACtC,MAAM,IAAI,KAAK,CAAC,YAAY,YAAY,mBAAmB,CAAC,CAAC;QAC/D,CAAC;QAED,OAAO,QAAQ,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC"}

package/src/lib/createCallbackProxyDecoration.ts

@@ -1,34 +0,0 @@
-import { createRecursiveProxy } from './createRecursiveProxy.js';
-
-/**
- * Create proxy for decorating procedures
- */
-export function createCallbackProxyDecoration<
-  Functions extends string[] | Readonly<string[]>,
->(
-  functions: Functions,
-  callback: (
-    path: string[],
-    functionName: Functions[number],
-    args: unknown[]
-  ) => unknown
-) {
-  return createRecursiveProxy((opts) => {
-    const path = opts.path.slice(0, -1);
-
-    // The last arg is for instance `.useMutation` or `.useQuery()`
-    const functionName = opts.path[opts.path.length - 1];
-
-    if (functionName === '_def') {
-      return {
-        path: path,
-      };
-    }
-
-    if (!functions.includes(functionName)) {
-      throw new Error(`Function ${functionName} is not supported`);
-    }
-
-    return callback(path, functionName, opts.args);
-  }, []);
-}