Migrating to V10 from V9

WWezter

10/9/2022

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

Ssachin

10/13/2022

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

Jjulius

10/13/2022

you need to update the frontend too

Jjulius

10/13/2022

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

Ssachin

10/13/2022

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

Jjulius

10/13/2022

you handle the case and do the renaming???

Ssachin

10/13/2022

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

Jjulius

10/13/2022

awesome

WWezter

10/14/2022

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

Jjulius

10/14/2022

can you also send the protectedProcedure? 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

WWezter

10/14/2022

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)

Jjulius

10/14/2022

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

WWezter

10/14/2022

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

Jjulius

10/14/2022

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

WWezter

10/14/2022

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

Jjulius

10/14/2022

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

WWezter

10/14/2022

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.

Looking for more? Join the community!

tRPC

Migrating to V10 from V9

Join Server

tRPC

Migrating to V10 from V9

Join Server

Recommended Posts

Authentication broke after bump to v10 from v9Anyone that has any suggestions on what might have caused this? I get the following error when tryi Show a spinner when any mutation is loading?Looking to show an activity spinner in the header of our application whenever a mutation is in fligh Sharing schemas between server and clientIn a typical nextJs setup, what is the idiomatic way to share zod schemas between frontend and backe v10 Migration interop, router doesnt have attributesHi, i've tried to migrate like stated in the docs, these are my routers. Question: Shouldn't appRout Recommended file structure for next.js?Hey all - using tRPC heavily with next.js and it's great. Our main `[trpc].ts` file is getting huge Unhandled Runtime ErrorTRPCClientErrorCall Stack Function.from node_modules\@trpc\client\dist\TRPCClientError-09b8a26b.esm.js (57:0) trans Sharing middleware between TRPC serversWe currently have *microservices* REST API's on Cloudflare Workers and I'm thinking about moving thi Is `trpc.withTRPC` for Next supposed to work with pages or only `_app`?I'd love to only have TRPC mount on certain pages of my Next.js app. Is this currently supported?Are there any example of subscriptions working with react native ?queries and mutations are working pretty well with react native, I'm unable however to get subscript Recommended way to prefetch client-sideIn react-query, you can do ``` queryClient.prefetchQuery(['todos', input], queryFn) ``` In trpc, I Revalidate API route from procedureHi, is there a way to revalidate a statically generated page from a trpc procedure? https://nextjs.Modifying payload client-side before cachingSay I have a payload that includes something like `category_id` in each of the items returned e.g.: Response headersIs it possible to modify the response headers from server to client?API Response caching not working on vercel ⁉I've followed the instructions in https://trpc.io/docs/v9/caching for API Response caching and it's when throwing a TRPCError, is there a way to include an internal error code ?for the given screenshot, if such error happens I wanna prompt the user to login or something.extra json property added after data when consuming a query hook.I have this issue where when consuming a RQ hook there is an extra `json` object that I have to use