chore: fix stackblitz output types (#6346)

Author: KATT

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@trpc/client": "npm:@trpc/client@next",
     "@trpc/server": "npm:@trpc/server@next",
+    "superjson": "^1.12.4",
     "zod": "^3.0.0"
   },
   "devDependencies": {

src/client/index.ts

@@ -11,6 +11,7 @@ import {
  * We only import the `AppRouter` type from the server - this is not available at runtime
  */
 import type { AppRouter } from '../server/index.js';
+import { transformer } from '../shared/transformer.js';
 
 // Initialize the tRPC client
 const trpc = createTRPCClient<AppRouter>({
@@ -19,9 +20,11 @@ const trpc = createTRPCClient<AppRouter>({
       condition: (op) => op.type === 'subscription',
       true: unstable_httpSubscriptionLink({
         url: 'http://localhost:3000',
+        transformer,
       }),
       false: unstable_httpBatchStreamLink({
         url: 'http://localhost:3000',
+        transformer,
       }),
     }),
   ],

src/server/trpc.ts

@@ -1,10 +1,13 @@
 import { initTRPC } from '@trpc/server';
+import { transformer } from '../shared/transformer.js';
 
 /**
  * Initialization of tRPC backend
  * Should be done only once per backend!
  */
-const t = initTRPC.create();
+const t = initTRPC.create({
+  transformer,
+});
 
 /**
  * Export reusable router and procedure helpers

src/shared/transformer.ts

@@ -0,0 +1,8 @@
+/**
+ * If you need to add transformers for special data types like `Temporal.Instant` or `Temporal.Date`, `Decimal.js`, etc you can do so here.
+ * Make sure to import this file rather than `superjson` directly.
+ * @see https://github.com/blitz-js/superjson#recipes
+ */
+import superjson from 'superjson';
+
+export const transformer = superjson;