Wezter•2y ago

Migrating to V10 from V9

If someone has some ideas on what I might have screwed up when trying to bump tRPC for this public starter please let me know. https://github.com/chamatt/create-kaol-app/pull/7/files

GitHub

Update server and db dependencies by wezter96 · Pull Request #7 · c...

@chamatt A start of trying to bump the app to using latest version of @tanstack/react-query, prisma and tRPC. If I use interop and don't replace the v9 with the v10 stuff I got it to work b...

18 Replies

sachin•2y ago

if there's any specific problems, let us know in more detail

julius•2y ago

you need to update the frontend too

julius•2y ago

idk how procedurenames like get-by-id works for the proxy thing, you'd probably need to call them like trpc.post['get-by-id'].useQuery(...) which is kinda whack imo. rename them to be getById for better dx i'd say

sachin•2y ago

yeah https://github.com/sachinraja/trpc-v10-migrate-codemod does that automatically 😎

julius•2y ago

you handle the case and do the renaming???

sachin•2y ago

it concerts everything to camelCase (not really handling the case, it just applies to every procedure)

julius•2y ago

awesome

Wezter•2y ago

ah thanks a lot for the input, I'll hopefully have time to look more at it this weekend. It kinda feels like I've misunderstood how I should update the 'me' query in the authRouter. Before it was a .merge and then a .query and now I only have .query there. https://github.com/chamatt/create-kaol-app/pull/7/files#diff-1737fd1080cbf94128d1b86db71d32f715ff7b0909d374e6de1d71f7a596e3cc

GitHub

Update server and db dependencies by wezter96 · Pull Request #7 · c...

@chamatt A start of trying to bump the app to using latest version of @tanstack/react-query, prisma and tRPC. If I use interop and don't replace the v9 with the v10 stuff I got it to work b...

Wezter•2y ago

@julius Do you see an issue with how I've implemented the me query and do you possibly have a solution for it? Old authRouter:

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
      },
    })
  )

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
      },
    })
  )

` New authRouter:

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 }
  }),
  //This seems wrong:
  me: protectedProcedure.query(async (req) => {
    const { ctx } = req
    return ctx.user
  }),
})

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 }
  }),
  //This seems wrong:
  me: protectedProcedure.query(async (req) => {
    const { ctx } = req
    return ctx.user
  }),
})

julius•2y ago

can you also send the protectedProcedure?

julius•2y ago

with nextauth it should look something like this https://github.com/t3-oss/create-t3-app/blob/next/cli/template/addons/trpc/auth-server-utils.ts

GitHub

create-t3-app/auth-server-utils.ts at next · t3-oss/create-t3-app

Quickest way to start a new web app with full stack typesafety - create-t3-app/auth-server-utils.ts at next · t3-oss/create-t3-app

Wezter•2y ago

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 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)

julius•2y ago

im not sure if you can do this

  ctx.user = user
  ctx.isAdmin = isAdmin(user.role)
  return next()

  ctx.user = user
  ctx.isAdmin = isAdmin(user.role)
  return next()

try replacing with

  return next({
    ctx: {
      user,
      isAdmin: isAdmin(role)
    }
  });

  return next({
    ctx: {
      user,
      isAdmin: isAdmin(role)
    }
  });

or this should probably also work

  ctx.user = user
  ctx.isAdmin = isAdmin(user.role)
  return next({ ctx });

  ctx.user = user
  ctx.isAdmin = isAdmin(user.role)
  return next({ ctx });

Wezter•2y ago

Did you see an issue with my "me" query in the authrouter as well? It previously had a .merge and now it doesn't 🤔

julius•2y ago

merge means it was a router, not sure why you had a router with a query called '' 🤔

Wezter•2y ago

I didn't create any of this, I'm just trying to bump a starter someone else created. https://github.com/chamatt/create-kaol-app

GitHub

GitHub - chamatt/create-kaol-app: Kaol Stack - Prisma, Expo, Next, ...

Kaol Stack - Prisma, Expo, Next, TRPC, Solito, Tailwind - A monorepo template for a truly universal app - GitHub - chamatt/create-kaol-app: Kaol Stack - Prisma, Expo, Next, TRPC, Solito, Tailwind -...

julius•2y ago

it will be called in a similar way now, trpc.auth.me.useQuery()

Wezter•2y ago

It's the only starter that I've found that has implemented screen sharing well between the web and mobile that also use tRPC and DB integration. I'd probably have gone with the t3 turbo starter otherwise.