@veloxts/client 0.6.93 → 0.6.95

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @veloxts/client
 
+## 0.6.95
+
+### Patch Changes
+
+- fix(create): use /trpc baseUrl for tRPC template and unwrap tRPC response format
+
+## 0.6.94
+
+### Patch Changes
+
+- feat(client): add tRPC router type support for ClientFromRouter and VeloxHooks
+
 ## 0.6.93
 
 ### Patch Changes

package/GUIDE.md

@@ -4,6 +4,24 @@ Type-safe frontend API client with zero code generation.
 
 ## Quick Start
 
+### tRPC Mode (Recommended for tRPC template)
+
+```typescript
+import { createClient } from '@veloxts/client';
+import type { AppRouter } from '../../api/src/router.js';
+
+// AppRouter is typeof router from rpc()
+const api = createClient<AppRouter>({
+  baseUrl: 'http://localhost:3030/trpc',
+  // mode: 'trpc' - auto-detected when baseUrl ends with /trpc
+});
+
+const health = await api.health.getHealth();
+const users = await api.users.listUsers();
+```
+
+### REST Mode (ProcedureCollection)
+
 ```typescript
 import { createClient } from '@veloxts/client';
 import type { userProcedures } from '../server/procedures';
@@ -42,6 +60,27 @@ try {
 
 ## React Query Integration
 
+### Recommended: createVeloxHooks (tRPC-style API)
+
+```typescript
+import { createVeloxHooks, VeloxProvider } from '@veloxts/client/react';
+import type { AppRouter } from '../../api/src/router.js';
+
+// Create typed hooks - works with both ProcedureCollection and tRPC router types
+export const api = createVeloxHooks<AppRouter>();
+
+// In component
+function UserList() {
+  const { data, isLoading } = api.users.listUsers.useQuery();
+  const { mutate } = api.users.createUser.useMutation();
+
+  // Suspense variant
+  const { data: users } = api.users.listUsers.useSuspenseQuery();
+}
+```
+
+### Basic: Manual React Query
+
 ```typescript
 import { useQuery, useMutation } from '@tanstack/react-query';
 

package/dist/client.js

@@ -412,6 +412,14 @@ async function executeProcedure(call, state, isRetry = false) {
     if (state.config.onResponse) {
         await state.config.onResponse(response);
     }
+    // Unwrap tRPC response format: { result: { data: ... } }
+    const mode = detectMode(state.config);
+    if (mode === 'trpc' && body && typeof body === 'object') {
+        const trpcResponse = body;
+        if (trpcResponse.result?.data !== undefined) {
+            return trpcResponse.result.data;
+        }
+    }
     return body;
 }
 /**

package/dist/react/proxy-types.d.ts

@@ -342,27 +342,77 @@ type VeloxProcedureHooks<TProcedure> = TProcedure extends ClientProcedure<infer
 export type VeloxNamespace<TProcedures extends ProcedureRecord> = {
     [K in keyof TProcedures]: VeloxProcedureHooks<TProcedures[K]>;
 };
+/**
+ * Extract input type from a tRPC procedure
+ */
+type InferTRPCInput<T> = T extends {
+    _def: {
+        $types: {
+            input: infer I;
+        };
+    };
+} ? I : unknown;
+/**
+ * Extract output type from a tRPC procedure
+ */
+type InferTRPCOutput<T> = T extends {
+    _def: {
+        $types: {
+            output: infer O;
+        };
+    };
+} ? O : unknown;
+/**
+ * Determine if a tRPC procedure is a query or mutation
+ */
+type InferTRPCType<T> = T extends {
+    _def: {
+        type: infer TType;
+    };
+} ? TType extends 'query' ? 'query' : TType extends 'mutation' ? 'mutation' : 'query' : 'query';
+/**
+ * Resolve a tRPC procedure to its appropriate hook interface
+ */
+type VeloxTRPCProcedureHooks<TProcedure> = InferTRPCType<TProcedure> extends 'mutation' ? VeloxMutationProcedure<InferTRPCInput<TProcedure>, InferTRPCOutput<TProcedure>> : VeloxQueryProcedure<InferTRPCInput<TProcedure>, InferTRPCOutput<TProcedure>>;
+/**
+ * Maps a tRPC namespace to hook interfaces
+ */
+export type VeloxTRPCNamespace<TNamespace> = {
+    [K in keyof TNamespace]: TNamespace[K] extends {
+        _def: unknown;
+    } ? VeloxTRPCProcedureHooks<TNamespace[K]> : never;
+};
 /**
  * Maps router namespaces to their namespace hook interfaces
  *
  * This is the top-level type returned by `createVeloxHooks`.
  *
- * @template TRouter - The router type (collection of procedure collections)
+ * Supports two router shapes:
+ * 1. ProcedureCollection-based (REST mode): { namespace: ProcedureCollection }
+ * 2. tRPC router (tRPC mode): { namespace: { procedure: TRPCProcedure } }
+ *
+ * @template TRouter - The router type (collection of procedure collections or tRPC router)
  *
  * @example
  * ```typescript
- * type AppRouter = {
- *   users: typeof userProcedures;
- *   posts: typeof postProcedures;
- * };
+ * // REST mode (ProcedureCollection)
+ * type AppRouter = { users: typeof userProcedures };
+ * const api = createVeloxHooks<AppRouter>();
+ *
+ * // tRPC mode
+ * const { router } = rpc([userProcedures] as const);
+ * export type AppRouter = typeof router;
+ * const api = createVeloxHooks<AppRouter>();
  *
- * const api: VeloxHooks<AppRouter> = createVeloxHooks<AppRouter>();
- * // api.users.getUser is VeloxQueryProcedure<{id: string}, User>
- * // api.users.createUser is VeloxMutationProcedure<CreateUserInput, User>
+ * // Both support:
+ * // api.users.getUser.useQuery({ id })
+ * // api.users.createUser.useMutation()
  * ```
  */
 export type VeloxHooks<TRouter> = {
-    [K in keyof TRouter]: TRouter[K] extends ProcedureCollection<infer _TNamespace, infer TProcedures> ? VeloxNamespace<TProcedures> : never;
+    [K in keyof TRouter]: TRouter[K] extends ProcedureCollection<infer _TNamespace, infer TProcedures> ? VeloxNamespace<TProcedures> : TRouter[K] extends Record<string, {
+        _def: unknown;
+    }> ? VeloxTRPCNamespace<TRouter[K]> : never;
 };
 /**
  * Configuration for createVeloxHooks

package/dist/types.d.ts

@@ -94,6 +94,67 @@ export type InferProcedureOutput<T> = T extends ClientProcedure<unknown, infer O
  * Works with both ClientProcedure and @veloxts/router's CompiledProcedure
  */
 export type InferProcedureType<T> = T extends ClientProcedure<unknown, unknown, infer TType> ? TType : never;
+/**
+ * Extracts the input type from a tRPC procedure
+ *
+ * tRPC procedures have shape: { _def: { $types: { input: I, output: O } } }
+ */
+export type InferTRPCProcedureInput<T> = T extends {
+    _def: {
+        $types: {
+            input: infer I;
+        };
+    };
+} ? I : unknown;
+/**
+ * Extracts the output type from a tRPC procedure
+ *
+ * tRPC procedures have shape: { _def: { $types: { input: I, output: O } } }
+ */
+export type InferTRPCProcedureOutput<T> = T extends {
+    _def: {
+        $types: {
+            output: infer O;
+        };
+    };
+} ? O : unknown;
+/**
+ * Helper type to determine if input is "empty" (void, undefined, never, or unknown)
+ *
+ * tRPC uses `void` for procedures with no input, but the type can also appear as
+ * `undefined` or `unknown` in some cases.
+ */
+type IsEmptyInput<T> = [T] extends [void] ? true : [T] extends [undefined] ? true : [T] extends [never] ? true : unknown extends T ? true : false;
+/**
+ * Builds a callable client interface from a tRPC namespace
+ *
+ * tRPC namespaces are objects where each key is a procedure with
+ * the shape: { _def: { $types: { input: I, output: O } } }
+ *
+ * Handles procedures with no input (void/undefined) by making the parameter optional.
+ */
+export type ClientFromTRPCNamespace<TNamespace> = {
+    [K in keyof TNamespace]: IsEmptyInput<InferTRPCProcedureInput<TNamespace[K]>> extends true ? () => Promise<InferTRPCProcedureOutput<TNamespace[K]>> : (input: InferTRPCProcedureInput<TNamespace[K]>) => Promise<InferTRPCProcedureOutput<TNamespace[K]>>;
+};
+/**
+ * Checks if a type looks like a tRPC procedure
+ */
+export type IsTRPCProcedure<T> = T extends {
+    _def: {
+        $types: {
+            input: unknown;
+            output: unknown;
+        };
+    };
+} ? true : false;
+/**
+ * Checks if a type looks like a tRPC namespace (object containing tRPC procedures)
+ */
+export type IsTRPCNamespace<T> = T extends Record<string, {
+    _def: {
+        $types: unknown;
+    };
+}> ? true : false;
 /**
  * Builds a callable client interface from a single procedure collection
  *
@@ -107,28 +168,31 @@ export type ClientFromCollection<TCollection extends ProcedureCollection> = {
 /**
  * Builds a complete client interface from a router (collection of collections)
  *
- * For each collection namespace, creates a property with all callable procedures.
+ * Supports two router shapes:
+ * 1. ProcedureCollection-based (REST mode): { namespace: ProcedureCollection }
+ * 2. tRPC router (tRPC mode): { namespace: { procedure: TRPCProcedure } }
  *
  * @example
  * ```typescript
- * // Backend defines:
+ * // REST mode (ProcedureCollection):
  * const userProcedures = defineProcedures('users', {
  *   getUser: procedure().input(...).output(...).query(...),
- *   createUser: procedure().input(...).output(...).mutation(...),
  * });
- *
- * // Frontend gets:
  * type Client = ClientFromRouter<{ users: typeof userProcedures }>;
- * // Client = {
- * //   users: {
- * //     getUser: (input: { id: string }) => Promise<User>;
- * //     createUser: (input: CreateUserInput) => Promise<User>;
- * //   }
- * // }
+ *
+ * // tRPC mode (AppRouter):
+ * const { router } = rpc([userProcedures] as const);
+ * export type AppRouter = typeof router;
+ * type Client = ClientFromRouter<AppRouter>;
+ *
+ * // Both result in:
+ * // Client = { users: { getUser: (input: { id: string }) => Promise<User> } }
  * ```
  */
 export type ClientFromRouter<TRouter> = {
-    [K in keyof TRouter]: TRouter[K] extends ProcedureCollection ? ClientFromCollection<TRouter[K]> : never;
+    [K in keyof TRouter]: TRouter[K] extends ProcedureCollection ? ClientFromCollection<TRouter[K]> : TRouter[K] extends Record<string, {
+        _def: unknown;
+    }> ? ClientFromTRPCNamespace<TRouter[K]> : never;
 };
 /**
  * A single route entry with method, path, and procedure kind
@@ -327,3 +391,4 @@ export interface ProcedureCall {
  * HTTP method inferred from procedure name
  */
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veloxts/client",
-  "version": "0.6.93",
+  "version": "0.6.95",
   "description": "Type-safe frontend API client for VeloxTS framework",
   "type": "module",
   "main": "dist/index.js",