The Truth About cross-platform with GraphQL and tRPC: Results

// graphql-server.ts
// Dependencies: graphql@16.8.1, @graphql-yoga/node@5.2.0, @graphql-tools/schema@10.0.2
import { createServer } from '@graphql-yoga/node';
import { makeExecutableSchema } from '@graphql-tools/schema';
import { GraphQLError } from 'graphql';

// Define strict GraphQL schema with input validation
const typeDefs = `
  type User {
    id: ID!
    email: String!
    createdAt: String!
  }

  input CreateUserInput {
    email: String!
    password: String!
  }

  type AuthPayload {
    token: String!
    user: User!
  }

  type Query {
    me: User
    users(limit: Int! = 10): [User!]!
  }

  type Mutation {
    createUser(input: CreateUserInput!): AuthPayload!
    login(email: String!, password: String!): AuthPayload!
  }
` as const;

// Mock user store with proper error handling
const users = new Map();

// Resolvers with typed context and error boundaries
const resolvers = {
  Query: {
    me: (_: unknown, __: unknown, context: { userId?: string }) => {
      if (!context.userId) {
        throw new GraphQLError('Unauthorized: No user ID in context', {
          extensions: { code: 'UNAUTHORIZED' },
        });
      }
      const user = users.get(context.userId);
      if (!user) {
        throw new GraphQLError('User not found', {
          extensions: { code: 'NOT_FOUND' },
        });
      }
      return { id: user.id, email: user.email, createdAt: user.createdAt };
    },
    users: (_: unknown, args: { limit: number }) => {
      if (args.limit > 100) {
        throw new GraphQLError('Limit cannot exceed 100', {
          extensions: { code: 'BAD_USER_INPUT' },
        });
      }
      return Array.from(users.values())
        .slice(0, args.limit)
        .map(u => ({ id: u.id, email: u.email, createdAt: u.createdAt }));
    },
  },
  Mutation: {
    createUser: (_: unknown, args: { input: { email: string; password: string } }) => {
      // Input validation
      if (!args.input.email.includes('@')) {
        throw new GraphQLError('Invalid email format', {
          extensions: { code: 'BAD_USER_INPUT' },
        });
      }
      if (args.input.password.length < 8) {
        throw new GraphQLError('Password must be at least 8 characters', {
          extensions: { code: 'BAD_USER_INPUT' },
        });
      }
      // Check for duplicate email
      const existing = Array.from(users.values()).find(u => u.email === args.input.email);
      if (existing) {
        throw new GraphQLError('Email already registered', {
          extensions: { code: 'CONFLICT' },
        });
      }
      // Create user (in production, hash password with bcrypt)
      const id = Math.random().toString(36).substring(2, 9);
      const user = {
        id,
        email: args.input.email,
        password: args.input.password, // NEVER do this in prod, use bcrypt
        createdAt: new Date().toISOString(),
      };
      users.set(id, user);
      // Generate mock JWT
      const token = `mock-jwt-${id}`;
      return { token, user: { id: user.id, email: user.email, createdAt: user.createdAt } };
    },
    login: (_: unknown, args: { email: string; password: string }) => {
      const user = Array.from(users.values()).find(u => u.email === args.email);
      if (!user || user.password !== args.password) {
        throw new GraphQLError('Invalid credentials', {
          extensions: { code: 'UNAUTHORIZED' },
        });
      }
      const token = `mock-jwt-${user.id}`;
      return { token, user: { id: user.id, email: user.email, createdAt: user.createdAt } };
    },
  },
};

// Create executable schema
const schema = makeExecutableSchema({ typeDefs, resolvers });

// Initialize Yoga server with error handling and CORS
const server = createServer({
  schema,
  context: async ({ request }) => {
    // Extract JWT from Authorization header
    const authHeader = request.headers.get('authorization');
    if (!authHeader) return {};
    const token = authHeader.replace('Bearer ', '');
    const userId = token.startsWith('mock-jwt-') ? token.replace('mock-jwt-', '') : undefined;
    return { userId };
  },
  cors: {
    origin: ['https://my-cross-platform-app.com'],
    credentials: true,
  },
  maskedErrors: false, // Disable masking for debugging, enable in prod
});

// Start server
server.start(() => console.log('GraphQL Yoga server running on http://localhost:4000/graphql'));

// Error handling for uncaught exceptions
process.on('uncaughtException', (err) => {
  console.error('Uncaught exception:', err);
  process.exit(1);
});

process.on('unhandledRejection', (reason) => {
  console.error('Unhandled rejection:', reason);
});

// trpc-server.ts
// Dependencies: @trpc/server@11.0.0-rc.78, @trpc/client@11.0.0-rc.78, zod@3.23.0
import { initTRPC, TRPCError } from '@trpc/server';
import { createExpressMiddleware } from '@trpc/server/adapters/express';
import express from 'express';
import cors from 'cors';
import { z } from 'zod';

// Initialize tRPC with context type
const t = initTRPC.context<{ userId?: string }>().create();

// Mock user store (same as GraphQL example for parity)
const users = new Map();

// Define public procedure (no auth required)
const publicProcedure = t.procedure;
// Define protected procedure (requires auth)
const protectedProcedure = t.procedure.use(async ({ ctx, next }) => {
  if (!ctx.userId) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: 'No user ID in context',
    });
  }
  const user = users.get(ctx.userId);
  if (!user) {
    throw new TRPCError({
      code: 'NOT_FOUND',
      message: 'User not found',
    });
  }
  return next({ ctx: { ...ctx, user } });
});

// Define tRPC router with Zod validation
const appRouter = t.router({
  // Query: Get current user (protected)
  me: protectedProcedure.query(({ ctx }) => {
    return {
      id: ctx.user.id,
      email: ctx.user.email,
      createdAt: ctx.user.createdAt,
    };
  }),

  // Query: List users with limit validation
  users: publicProcedure
    .input(z.object({ limit: z.number().min(1).max(100).default(10) }))
    .query(({ input }) => {
      return Array.from(users.values())
        .slice(0, input.limit)
        .map(u => ({ id: u.id, email: u.email, createdAt: u.createdAt }));
    }),

  // Mutation: Create user with Zod validation
  createUser: publicProcedure
    .input(
      z.object({
        email: z.string().email('Invalid email format'),
        password: z.string().min(8, 'Password must be at least 8 characters'),
      })
    )
    .mutation(({ input }) => {
      // Check for duplicate email
      const existing = Array.from(users.values()).find(u => u.email === input.email);
      if (existing) {
        throw new TRPCError({
          code: 'CONFLICT',
          message: 'Email already registered',
        });
      }
      // Create user (hash password in production!)
      const id = Math.random().toString(36).substring(2, 9);
      const user = {
        id,
        email: input.email,
        password: input.password, // Use bcrypt.hash in prod
        createdAt: new Date().toISOString(),
      };
      users.set(id, user);
      // Generate mock JWT
      const token = `mock-jwt-${id}`;
      return { token, user: { id: user.id, email: user.email, createdAt: user.createdAt } };
    }),

  // Mutation: Login with Zod validation
  login: publicProcedure
    .input(
      z.object({
        email: z.string().email(),
        password: z.string(),
      })
    )
    .mutation(({ input }) => {
      const user = Array.from(users.values()).find(u => u.email === input.email);
      if (!user || user.password !== input.password) {
        throw new TRPCError({
          code: 'UNAUTHORIZED',
          message: 'Invalid credentials',
        });
      }
      const token = `mock-jwt-${user.id}`;
      return { token, user: { id: user.id, email: user.email, createdAt: user.createdAt } };
    }),
});

// Export router type for client-side type safety
export type AppRouter = typeof appRouter;

// Initialize Express app
const app = express();
app.use(cors({ origin: ['https://my-cross-platform-app.com'], credentials: true }));
app.use(express.json());

// Mount tRPC middleware
app.use(
  '/trpc',
  createExpressMiddleware({
    router: appRouter,
    createContext: async ({ req }) => {
      const authHeader = req.headers.authorization;
      if (!authHeader) return {};
      const token = authHeader.replace('Bearer ', '');
      const userId = token.startsWith('mock-jwt-') ? token.replace('mock-jwt-', '') : undefined;
      return { userId };
    },
  })
);

// Start server
const PORT = 4001;
app.listen(PORT, () => {
  console.log(`tRPC server running on http://localhost:${PORT}/trpc`);
});

// Error handling
process.on('uncaughtException', (err) => {
  console.error('Uncaught exception:', err);
  process.exit(1);
});

process.on('unhandledRejection', (reason) => {
  console.error('Unhandled rejection:', reason);
});

// cross-platform-client.tsx
// Dependencies: @trpc/client@11.0.0-rc.78, @apollo/client@3.11.0, graphql@16.8.1, react-native@0.74.0
import React, { useEffect, useState } from 'react';
import { View, Text, Button, TextInput, ActivityIndicator } from 'react-native';
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery, useMutation } from '@apollo/client';
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './trpc-server'; // Import router type from server for end-to-end safety

// --- GraphQL Client Setup (Apollo) ---
const apolloClient = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
  defaultOptions: {
    query: { fetchPolicy: 'network-only' },
  },
});

// GraphQL queries/mutations (no end-to-end type safety)
const GET_ME_QUERY = gql`
  query Me {
    me {
      id
      email
      createdAt
    }
  }
`;

const CREATE_USER_MUTATION = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      token
      user {
        id
        email
        createdAt
      }
    }
  }
`;

// --- tRPC Client Setup (Type-safe end-to-end) ---
const trpcClient = createTRPCProxyClient({
  links: [
    httpBatchLink({
      url: 'http://localhost:4001/trpc',
      headers: () => {
        const token = localStorage.getItem('trpc-token'); // Use AsyncStorage in React Native
        return token ? { authorization: `Bearer ${token}` } : {};
      },
    }),
  ],
});

// --- React Native Component ---
const CrossPlatformDemo = () => {
  // State for both clients
  const [graphqlUser, setGraphqlUser] = useState<{ id: string; email: string } | null>(null);
  const [trpcUser, setTrpcUser] = useState<{ id: string; email: string } | null>(null);
  const [loading, setLoading] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  // GraphQL: Fetch current user (no type safety on response)
  const { data: gqlData, error: gqlError, refetch: refetchMe } = useQuery(GET_ME_QUERY, {
    onError: (err) => console.error('GraphQL error:', err.message),
  });

  // tRPC: Fetch current user (fully typed response)
  const fetchTrpcMe = async () => {
    try {
      const user = await trpcClient.me.query();
      setTrpcUser(user); // user is fully typed: { id: string; email: string; createdAt: string }
    } catch (err) {
      console.error('tRPC error:', err);
    }
  };

  // Handle create user for both clients
  const handleCreateUser = async () => {
    setLoading(true);
    try {
      // GraphQL: Untyped input, untyped response
      const { data: gqlResponse } = await apolloClient.mutate({
        mutation: CREATE_USER_MUTATION,
        variables: { input: { email, password } },
      });
      setGraphqlUser(gqlResponse.createUser.user);
      localStorage.setItem('gql-token', gqlResponse.createUser.token);

      // tRPC: Fully typed input and response (Zod validation on server)
      const trpcResponse = await trpcClient.createUser.mutate({ email, password });
      setTrpcUser(trpcResponse.user);
      localStorage.setItem('trpc-token', trpcResponse.token);
    } catch (err) {
      console.error('Create user error:', err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    refetchMe();
    fetchTrpcMe();
  }, []);

  if (loading) return ;

  return (

      Cross-Platform API Comparison

      {/* Email/Password Inputs */}



      {/* Create User Button */}