Update server and db dependencies

apps/next/package.json

@@ -9,7 +9,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "vercel-build": "DATABASE_URL=$MIGRATE_DB_URL prisma generate && DATABASE_URL=$MIGRATE_DB_URL prisma migrate deploy && next build"
+    "vercel-build": "DATABASE_URL=$DATABASE_URL prisma generate && DATABASE_URL=$DATABASE_URL prisma migrate deploy && next build"
   },
   "dependencies": {
     "@expo/next-adapter": "^3.1.20",

packages/api/package.json

@@ -6,9 +6,10 @@
   ],
   "private": true,
   "dependencies": {
-    "@trpc/server": "^9.15.0",
+    "@trpc/server": "10.0.0-proxy-beta.17",
     "bcrypt": "^5.0.1",
     "jsonwebtoken": "^8.5.1",
+    "superjson": "^1.10.0",
     "zod": "^3.17.2"
   },
   "devDependencies": {

packages/api/src/index.ts

@@ -1,9 +1,10 @@
-import { createRouter } from './routers/context'
 import { authRouter } from './routers/auth'
 import { postRouter } from './routers/post'
+import { t } from './trpc'
 
-export const appRouter = createRouter()
-  .merge('auth.', authRouter)
-  .merge('post.', postRouter)
+export const appRouter = t.router({
+  auth: authRouter,
+  post: postRouter,
+})
 
 export type AppRouter = typeof appRouter

packages/api/src/inferance-helpers.ts

@@ -4,6 +4,7 @@ import { inferProcedureInput, inferProcedureOutput } from '@trpc/server'
  * This is a helper method to infer the output of a query resolver
  * @example type HelloOutput = inferQueryOutput<'hello'>
  */
+//TODO: update or remove these?
 export type inferQueryOutput<
   TRouteKey extends keyof AppRouter['_def']['queries']
 > = inferProcedureOutput<AppRouter['_def']['queries'][TRouteKey]>

packages/api/src/routers/auth.ts

@@ -1,28 +1,25 @@
 import { createSession } from '../utils/auth'
-import { createRouter, protectedRoute } from './context'
+import { protectedProcedure } from './context'
 import signIn, { SignInSchema } from '../services/auth/signIn'
 import signUp, { SignUpSchema } from '../services/auth/signUp'
 
-export const authRouter = createRouter()
-  .mutation('signIn', {
-    input: SignInSchema,
-    resolve: async ({ input: { email, password } }) => {
-      return signIn({ email, password })
-    },
-  })
-  .mutation('signUp', {
-    input: SignUpSchema,
-    resolve: async ({ input: { email, password } }) => {
-      const user = await signUp({ email, password })
-      const token = await createSession(user)
-      return { token }
-    },
-  })
-  .merge(
-    'me',
-    protectedRoute.query('', {
-      resolve: async ({ ctx }) => {
-        return ctx.user
-      },
-    })
-  )
+import { t } from '.././trpc'
+
+export const authRouter = t.router({
+  signIn: t.procedure.input(SignInSchema).mutation((req) => {
+    const { input } = req
+
+    return signIn({ email: input.email, password: input.password })
+  }),
+  signUp: t.procedure.input(SignUpSchema).mutation(async (req) => {
+    const input = req.input
+
+    const user = await signUp({ email: input.email, password: input.password })
+    const token = await createSession(user)
+    return { token }
+  }),
+  me: protectedProcedure.query(async (req) => {
+    const { ctx } = req
+    return ctx.user
+  }),
+})

packages/api/src/routers/context.ts

@@ -5,6 +5,7 @@ import crypto from 'crypto'
 import { getUserFromHeader } from '../utils/auth'
 import { User } from '.prisma/client'
 import { prismaClient } from 'db'
+import { t } from '../trpc'
 
 const ADMIN_ROLES = ['ADMIN', 'SUPERADMIN']
 
@@ -30,23 +31,23 @@ export const createContext = async ({
     prisma: prismaClient,
   }
 }
-
-export const protectedRoute = createRouter().middleware(
-  async ({ ctx, next }) => {
-    const user = await getUserFromHeader(ctx.headers)
-    if (!user) {
-      throw new TRPCError({
-        message: `Unauthenticated when trying to access ${ctx.req.url}`,
-        code: 'UNAUTHORIZED',
-      })
-    }
-    ctx.user = user
-    ctx.isAdmin = isAdmin(user.role)
-    return next()
+export const protectedRoute = t.middleware(async (req) => {
+  const { ctx, next } = req
+  const user = await getUserFromHeader(ctx.headers)
+  if (!user) {
+    throw new TRPCError({
+      message: `Unauthenticated when trying to access ${ctx.req.url}`,
+      code: 'UNAUTHORIZED',
+    })
   }
-)
+  ctx.user = user
+  ctx.isAdmin = isAdmin(user.role)
+  return next()
+})
+
+export const protectedProcedure = t.procedure.use(protectedRoute)
 
-export const adminRoute = createRouter().middleware(async ({ ctx, next }) => {
+export const adminRoute = t.middleware(async ({ ctx, next }) => {
   const user = await getUserFromHeader(ctx.headers)
 
   if (!user) {

packages/api/src/routers/post.ts

@@ -1,21 +1,24 @@
-import { createRouter, protectedRoute } from './context'
 import { z } from 'zod'
+import { protectedProcedure } from './context'
+import { t } from '.././trpc'
 
-export const postRouter = protectedRoute
-  .query('get-all', {
-    async resolve({ ctx }) {
-      return await ctx.prisma.post.findMany({
-        include: {
-          author: true,
-        },
+export const postRouter = t.router({
+  getAll: protectedProcedure.query(async (req) => {
+    const { ctx } = req
+    return await ctx.prisma.post.findMany({
+      include: {
+        author: true,
+      },
+    })
+  }),
+  getById: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
       })
-    },
-  })
-  .query('get-by-id', {
-    input: z.object({
-      id: z.string().uuid(),
-    }),
-    async resolve({ input, ctx }) {
+    )
+    .query(async (req) => {
+      const { ctx, input } = req
       return await ctx.prisma.post.findFirst({
         where: {
           id: input.id,
@@ -27,33 +30,37 @@ export const postRouter = protectedRoute
           title: 'asc',
         },
       })
-    },
-  })
-  .mutation('create', {
-    input: z.object({
-      authorId: z.string(),
-      title: z.string(),
-      content: z.string(),
     }),
-    async resolve({ input, ctx }) {
+  create: protectedProcedure
+    .input(
+      z.object({
+        authorId: z.string(),
+        title: z.string(),
+        content: z.string(),
+      })
+    )
+    .mutation(async (req) => {
+      const { input, ctx } = req
       return await ctx.prisma.post.create({
         data: {
           authorId: input.authorId,
           title: input.title,
           content: input.content,
         },
       })
-    },
-  })
-  .mutation('delete', {
-    input: z.object({
-      id: z.string().uuid(),
     }),
-    async resolve({ input, ctx }) {
+  delete: protectedProcedure
+    .input(
+      z.object({
+        id: z.string().uuid(),
+      })
+    )
+    .mutation(async (req) => {
+      const { input, ctx } = req
       return await ctx.prisma.post.delete({
         where: {
           id: input.id,
         },
       })
-    },
-  })
+    }),
+})

packages/api/src/trpc.ts

@@ -0,0 +1,15 @@
+import { initTRPC } from '@trpc/server'
+import superjson from 'superjson'
+import { Context } from './routers/context'
+
+export const t = initTRPC.context<Context>().create({
+  transformer: superjson,
+  errorFormatter({ shape }) {
+    return {
+      ...shape,
+      data: {
+        ...shape.data,
+      },
+    }
+  },
+})

packages/app/features/post/details-screen.tsx

@@ -15,9 +15,11 @@ const TextStyled = styled(Text, 'mb-4 text-center')
 export function PostDetailScreen() {
   const [id] = useParam('id')
 
-  const { data, isLoading } = trpc.useQuery(['post.get-by-id', { id: id! }], {
-    enabled: !!id,
-  })
+  //TODO: confirm this
+    const { data, isLoading } = trpc.post.getById.useQuery({ id: id! }, {
+        enabled: !!id,
+        trpc: {}
+    })
 
   if (isLoading)
     return (

packages/app/features/post/list-screen.tsx

@@ -10,7 +10,8 @@ import { GoBack } from 'app/components/GoBack'
 const Card = styled(View, 'bg-white shadow-sm mb-4 rounded-lg p-6 border')
 
 export function PostListScreen() {
-  const { data: posts } = trpc.useQuery(['post.get-all'])
+  // TODO: confirm this
+  const { data: posts } = trpc.post.getAll.useQuery()
 
   return (
     <View tw="flex-1 justify-center items-center p-4">

packages/app/package.json

@@ -5,18 +5,18 @@
   "dependencies": {
     "@react-navigation/native": "^6.0.8",
     "@react-navigation/native-stack": "^6.5.0",
-    "@trpc/client": "^9.15.0",
-    "@trpc/next": "^9.15.0",
-    "@trpc/react": "^9.15.0",
-    "@trpc/server": "^9.15.0",
+    "@trpc/client": "10.0.0-proxy-beta.17",
+    "@trpc/next": "10.0.0-proxy-beta.17",
+    "@trpc/react": "10.0.0-proxy-beta.17",
+    "@trpc/server": "10.0.0-proxy-beta.17",
     "api": "*",
     "dripsy": "^3.6.0",
     "expo-linking": "^3.0.0",
     "expo-updates": "^0.14.3",
     "jwt-decode": "^3.1.2",
     "lib": "*",
     "moti": "canary",
-    "react-query": "^3.34.7",
+    "@tanstack/react-query": "^4.10.3",
     "solito": "latest",
     "twrnc": "^3.3.3",
     "universal": "*"

packages/app/provider/APIProvider/APIProvider.tsx

@@ -1,21 +1,25 @@
 import { trpc } from 'app/utils/trpc'
 import { useState } from 'react'
-import { QueryClient, QueryClientProvider } from 'react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import SafeStorage from 'lib/safe-storage'
 import Config from 'app/config'
+import { httpBatchLink } from '@trpc/client'
 
 const createTrpcClient = () => {
   return trpc.createClient({
-    url: Config.apiUrl,
-    async headers() {
-      const sessionToken = await SafeStorage.get('sessionToken')
-
-      return {
-        authorization: sessionToken ? `Bearer ${sessionToken}` : undefined,
-        'Content-Type': 'application/json',
-        Accept: 'application/json',
-      }
-    },
+    links: [
+      httpBatchLink({
+        url: Config.apiUrl,
+        async headers() {
+          const sessionToken = SafeStorage.get('sessionToken')
+          return {
+            authorization: sessionToken ? `Bearer ${sessionToken}` : undefined,
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          }
+        },
+      }),
+    ],
   })
 }
 

packages/app/provider/AuthProvider/hooks.ts

@@ -2,7 +2,7 @@ import SafeStorage from 'lib/safe-storage'
 import { trpc } from 'app/utils/trpc'
 import jwtDecode from 'jwt-decode'
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { useQueryClient } from 'react-query'
+import { useQueryClient } from '@tanstack/react-query'
 import { useRouter } from 'solito/router'
 import { AuthInterface } from './types'
 import { routes } from 'app/navigation/routePaths'
@@ -45,7 +45,7 @@ const useAuthenticate = (setSessionToken: (token: string) => void) => {
 
 export const useSignIn = (setSessionToken: (token: string) => void) => {
   const authenticate = useAuthenticate(setSessionToken)
-  const loginMutation = trpc.useMutation('auth.signIn', {
+  const loginMutation = trpc.auth.signIn.useMutation({
     onSuccess: (data) => {
       authenticate(data.token)
     },
@@ -59,7 +59,7 @@ export const useSignIn = (setSessionToken: (token: string) => void) => {
 
 export const useSignUp = (setSessionToken: (token: string) => void) => {
   const authenticate = useAuthenticate(setSessionToken)
-  const signupMutation = trpc.useMutation('auth.signUp', {
+  const signupMutation = trpc.auth.signUp.useMutation({
     onSuccess: (data) => {
       authenticate(data.token)
     },
@@ -72,10 +72,11 @@ export const useSignUp = (setSessionToken: (token: string) => void) => {
 }
 
 export const useGetMe = (sessionToken: string) => {
-  return trpc.useQuery(['auth.me'], {
-    enabled: !!sessionToken,
-    retry: false,
-  })
+    return trpc.auth.me.useQuery(undefined, {
+        enabled: !!sessionToken,
+        retry: false,
+        trpc: {}
+    })
 }
 
 export const useLogout = (setSessionToken: (token: string) => void) => {