feat: expose TRPC transformer from api package

apps/expo/eslint.config.mjs

@@ -8,4 +8,27 @@ export default [
   },
   ...baseConfig,
   ...reactConfig,
+  {
+    rules: {
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "@acme/api",
+              message: "Only type imports from '@acme/api' are allowed",
+              allowTypeImports: true,
+            },
+          ],
+          patterns: [
+            {
+              group: ["@acme/api/*", "!@acme/api/transformer"],
+              message: "Only certain modules from '@acme/api' can be imported",
+              allowTypeImports: true,
+            },
+          ],
+        },
+      ],
+    },
+  },
 ];

apps/expo/package.json

@@ -15,9 +15,10 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@acme/api": "workspace:*",
     "@bacons/text-decoder": "^0.0.0",
     "@expo/metro-config": "^0.18.11",
-    "@shopify/flash-list": "1.6.4",
+    "@shopify/flash-list": "1.7.1",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/react-query": "catalog:",
@@ -39,11 +40,9 @@
     "react-native-gesture-handler": "~2.16.2",
     "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "~4.10.8",
-    "react-native-screens": "~3.31.1",
-    "superjson": "2.2.1"
+    "react-native-screens": "~3.31.1"
   },
   "devDependencies": {
-    "@acme/api": "workspace:*",
     "@acme/eslint-config": "workspace:*",
     "@acme/prettier-config": "workspace:*",
     "@acme/tailwind-config": "workspace:*",

apps/expo/src/utils/api.tsx

@@ -2,9 +2,9 @@ import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink, loggerLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
-import superjson from "superjson";
 
 import type { AppRouter } from "@acme/api";
+import { transformer } from "@acme/api/transformer";
 
 import { getBaseUrl } from "./base-url";
 import { getToken } from "./session-store";
@@ -31,7 +31,7 @@ export function TRPCProvider(props: { children: React.ReactNode }) {
           colorMode: "ansi",
         }),
         httpBatchLink({
-          transformer: superjson,
+          transformer,
           url: `${getBaseUrl()}/api/trpc`,
           headers() {
             const headers = new Map<string, string>();

apps/expo/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "~/*": ["./src/*"]
+      "~/*": ["./src/*"],
+      "@acme/api/transformer": ["../../packages/api/src/transformer.ts"]
     },
     "jsx": "react-native",
     "types": ["nativewind/types"],

apps/nextjs/package.json

@@ -28,7 +28,6 @@
     "next": "^14.2.5",
     "react": "catalog:react18",
     "react-dom": "catalog:react18",
-    "superjson": "2.2.1",
     "zod": "catalog:"
   },
   "devDependencies": {

apps/nextjs/src/trpc/query-client.ts

@@ -2,7 +2,8 @@ import {
   defaultShouldDehydrateQuery,
   QueryClient,
 } from "@tanstack/react-query";
-import SuperJSON from "superjson";
+
+import { transformer } from "@acme/api/transformer";
 
 export const createQueryClient = () =>
   new QueryClient({
@@ -13,13 +14,13 @@ export const createQueryClient = () =>
         staleTime: 30 * 1000,
       },
       dehydrate: {
-        serializeData: SuperJSON.serialize,
+        serializeData: transformer.output.serialize,
         shouldDehydrateQuery: (query) =>
           defaultShouldDehydrateQuery(query) ||
           query.state.status === "pending",
       },
       hydrate: {
-        deserializeData: SuperJSON.deserialize,
+        deserializeData: transformer.output.deserialize,
       },
     },
   });

apps/nextjs/src/trpc/react.tsx

@@ -5,9 +5,9 @@ import { useState } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
-import SuperJSON from "superjson";
 
 import type { AppRouter } from "@acme/api";
+import { transformer } from "@acme/api/transformer";
 
 import { env } from "~/env";
 import { createQueryClient } from "./query-client";
@@ -37,7 +37,7 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
             (op.direction === "down" && op.result instanceof Error),
         }),
         unstable_httpBatchStreamLink({
-          transformer: SuperJSON,
+          transformer,
           url: getBaseUrl() + "/api/trpc",
           headers() {
             const headers = new Headers();

packages/api/package.json

@@ -7,6 +7,10 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./src/index.ts"
+    },
+    "./transformer": {
+      "types": "./dist/transformer.d.ts",
+      "default": "./src/transformer.ts"
     }
   },
   "license": "MIT",

packages/api/src/transformer.ts

@@ -0,0 +1,22 @@
+import type { TRPCCombinedDataTransformer } from "@trpc/server";
+import SuperJSON from "superjson";
+
+/**
+ * tRPC transformer, used to serialize/deserialize data between client and server.
+ * This export is used internally in `@acme/api` and in both `apps/nextjs` and `apps/expo`.
+ *
+ * ! IMPORTANT: changing this is a BREAKING CHANGE !
+ * ? Even though this helps swapping transformers, bear in mind that distributed Expo apps
+ * ? will have the previous transformer bundled in their device, which will cause a mismatch
+ * ? in how the data is sent and received (basically, all API requests will fail).
+ */
+export const transformer: TRPCCombinedDataTransformer = {
+  input: {
+    serialize: SuperJSON.serialize,
+    deserialize: SuperJSON.deserialize,
+  },
+  output: {
+    serialize: SuperJSON.serialize,
+    deserialize: SuperJSON.deserialize,
+  },
+};

packages/api/src/trpc.ts

@@ -7,13 +7,14 @@
  * The pieces you will need to use are documented accordingly near the end
  */
 import { initTRPC, TRPCError } from "@trpc/server";
-import superjson from "superjson";
 import { ZodError } from "zod";
 
 import type { Session } from "@acme/auth";
 import { auth, validateToken } from "@acme/auth";
 import { db } from "@acme/db/client";
 
+import { transformer } from "./transformer";
+
 /**
  * Isomorphic Session getter for API requests
  * - Expo requests will have a session token in the Authorization header
@@ -61,7 +62,7 @@ export const createTRPCContext = async (opts: {
  * transformer
  */
 const t = initTRPC.context<typeof createTRPCContext>().create({
-  transformer: superjson,
+  transformer,
   errorFormatter: ({ shape, error }) => ({
     ...shape,
     data: {