fix: serialize and deserialize methods to support null, undefined, boolean, NaN types

Author: arnaudpfu

example/components/client-comp.tsx

@@ -22,15 +22,11 @@ export const ClientComp: React.FC = () => {
         organizationId: "qlmskjdqslmdf",
         endDate: "03-10-2025",
         where: {
-          lksdf: true,
-          what: [
-            "do",
-            "you",
-            {
-              sdf: "string",
-              test: 5,
-            },
-          ],
+          null: null,
+          false: false,
+          undefined: undefined,
+          nan: NaN,
+          number: 34,
         },
       });
     };

example/trpc/router.ts

@@ -95,6 +95,24 @@ export const appRouter = ctx.router({
     .input(analyticsFetcherSchema)
     .action(async (inputs) => {
       console.log("analyticsFetcher");
+
+      // null: null,
+      // false: false,
+      // undefined: undefined,
+      // nan: NaN,
+      // number: 34,
+
+      console.log( {where: inputs.where} )
+      console.log( typeof inputs.where.null )
+      console.log( {null :typeof inputs.where.null} )
+      console.log( {false :typeof inputs.where.false} )
+      console.log( {undefined :typeof inputs.where.undefined} )
+      console.log( inputs.where.nan )
+      console.log( {nan :typeof inputs.where.nan} )
+      console.log( {number :typeof inputs.where.number} )
+
+      // if(typeof K === '')
+
       console.log({ inputs });
       return { test: true };
     }),

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@creatorem/next-trpc",
-    "version": "1.0.12",
+    "version": "1.0.13",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/creatorem/next-trpc"

src/__tests__/create-trpc-api.test.ts

@@ -1,6 +1,20 @@
 import { describe, it, expect, jest } from '@jest/globals';
 import z from 'zod';
 
+// Helper function to create mock request with Base64 encoded input
+const createMockRequest = (input: any) => {
+  const serializedInput = JSON.stringify(input, (key, value) => {
+    if (Number.isNaN(value)) {
+      return '__NAN__';
+    }
+    return value;
+  });
+  const encoded = btoa(serializedInput);
+  const searchParams = new URLSearchParams();
+  searchParams.set('input', encoded);
+  return { nextUrl: { searchParams } };
+};
+
 // Mock the dependencies we can't import in test environment
 jest.mock('next/server', () => ({
   NextResponse: {
@@ -119,8 +133,7 @@ describe('create-trpc-api', () => {
         getUser: endpoint.input(schema).action(mockAction)
       });
 
-      const searchParams = new URLSearchParams('id=123');
-      const mockRequest = { nextUrl: { searchParams } };
+      const mockRequest = createMockRequest({ id: '123' });
       const handler = createTrpcAPI({ router: testRouter });
 
       await handler(mockRequest as any, { params: Promise.resolve({ trpc: 'get-user' }) });
@@ -162,8 +175,7 @@ describe('create-trpc-api', () => {
         getUser: endpoint.input(schema).action(mockAction)
       });
 
-      const searchParams = new URLSearchParams('id=');
-      const mockRequest = { nextUrl: { searchParams } };
+      const mockRequest = createMockRequest({ id: '' });
       const handler = createTrpcAPI({ router: testRouter });
 
       await handler(mockRequest as any, { params: Promise.resolve({ trpc: 'get-user' }) });
@@ -220,8 +232,7 @@ describe('create-trpc-api', () => {
         createUser: endpoint.input(schema).action(mockAction)
       });
 
-      const searchParams = new URLSearchParams('name=John&age=30');
-      const mockRequest = { nextUrl: { searchParams } };
+      const mockRequest = createMockRequest({ name: 'John', age: '30' });
       const handler = createTrpcAPI({ router: testRouter });
 
       await handler(mockRequest as any, { params: Promise.resolve({ trpc: 'create-user' }) });

src/__tests__/create-trpc-client.test.ts

@@ -3,6 +3,18 @@ import { createTrpcClient, getTrpcFetch } from '../create-trpc-client';
 import { endpoint, router } from '../core';
 import z from 'zod';
 
+// Helper function to create expected URL with Base64 encoding
+const createExpectedUrl = (baseUrl: string, input: any) => {
+  const serializedInput = JSON.stringify(input, (key, value) => {
+    if (Number.isNaN(value)) {
+      return '__NAN__';
+    }
+    return value;
+  });
+  const encoded = btoa(serializedInput);
+  return `${baseUrl}?input=${encodeURIComponent(encoded)}`;
+};
+
 // Mock fetch
 const mockFetch = jest.fn() as jest.MockedFunction<typeof fetch>;
 global.fetch = mockFetch;
@@ -58,7 +70,7 @@ describe('create-trpc-client', () => {
       const result = await fetchFn({ id: '123', active: true });
 
       expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:3000/api/trpc/get-user?id=123&active=true',
+        createExpectedUrl('http://localhost:3000/api/trpc/get-user', { id: '123', active: true }),
         {
           method: 'GET',
           headers: {
@@ -206,7 +218,7 @@ describe('create-trpc-client', () => {
       await fetchFn(complexInput);
 
       expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:3000/api/trpc/create-user?name=John+Doe&age=30&active=true&metadata=%7B%22key%22%3A%22value%22%7D',
+        createExpectedUrl('http://localhost:3000/api/trpc/create-user', complexInput),
         expect.any(Object)
       );
     });
@@ -302,7 +314,7 @@ describe('create-trpc-client', () => {
       // Call with parameters
       await (client as any).withParams.fetch({ id: '123' });
       expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:3000/api/trpc/with-params?id=123',
+        createExpectedUrl('http://localhost:3000/api/trpc/with-params', { id: '123' }),
         expect.any(Object)
       );
     });

src/__tests__/create-trpc-query-client.test.ts

@@ -3,6 +3,18 @@ import { createTrpcQueryClient } from '../create-trpc-query-client';
 import { endpoint, router } from '../core';
 import z from 'zod';
 
+// Helper function to create expected URL with Base64 encoding
+const createExpectedUrl = (baseUrl: string, input: any) => {
+  const serializedInput = JSON.stringify(input, (key, value) => {
+    if (Number.isNaN(value)) {
+      return '__NAN__';
+    }
+    return value;
+  });
+  const encoded = btoa(serializedInput);
+  return `${baseUrl}?input=${encodeURIComponent(encoded)}`;
+};
+
 // Mock fetch
 const mockFetch = jest.fn() as jest.MockedFunction<typeof fetch>;
 global.fetch = mockFetch;
@@ -62,7 +74,7 @@ describe('create-trpc-query-client', () => {
       const result = await (client as any).getUser.fetch({ id: '123' });
 
       expect(mockFetch).toHaveBeenCalledWith(
-        'http://localhost:3000/api/trpc/get-user?id=123',
+        createExpectedUrl('http://localhost:3000/api/trpc/get-user', { id: '123' }),
         {
           method: 'GET',
           headers: {