BillyBob Posts

BillyBob

•Created by BillyBob on 3/24/2024 in #❓-help

Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]

Good Morning I am getting the above error when updating to the latest version of NextJS - 14.1.1 through 14.1.4. The last release that doesn't cause this error is 14.1.0. I have: * ensured versions are the same on server and client. * updated packages * removed all node_modules and reinstalled. * pnpm store prune, * deleted pnpm.lock and reinstalled. * deleted .next folder * latest v18 and v20 of Node.js It makes no sense at all. Its tRPC which is erroring but only when I upgrade NextJS past 14.1. I can see that the tRPC request within the middleware runs as expected but its when trying to render a RSC component with a server side tRPC call in it is when I get the error. full error:

../../node_modules/.pnpm/@trpc+client@10.45.2_@trpc+server@10.45.2/node_modules/@trpc/client/dist/index.mjs (160:0) @ eval
apps/web dev:  ⨯ TypeError: client[procedureType] is not a function
apps/web dev:     at eval (./src/lib/utils/trpc/server.ts:73:91)
apps/web dev:     at (rsc)/./src/lib/utils/trpc/server.ts (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:453:1)
apps/web dev:     at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev:     at eval (movies/movies.tsx:11:84)
apps/web dev:     at (rsc)/./src/app/(main)/(browse)/movies/movies.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:368:1)
apps/web dev:     at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev:     at eval (movies/page.tsx:9:65)
apps/web dev:     at (rsc)/./src/app/(main)/(browse)/movies/page.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:379:1)

../../node_modules/.pnpm/@trpc+client@10.45.2_@trpc+server@10.45.2/node_modules/@trpc/client/dist/index.mjs (160:0) @ eval
apps/web dev:  ⨯ TypeError: client[procedureType] is not a function
apps/web dev:     at eval (./src/lib/utils/trpc/server.ts:73:91)
apps/web dev:     at (rsc)/./src/lib/utils/trpc/server.ts (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:453:1)
apps/web dev:     at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev:     at eval (movies/movies.tsx:11:84)
apps/web dev:     at (rsc)/./src/app/(main)/(browse)/movies/movies.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:368:1)
apps/web dev:     at __webpack_require__ (/home/liamwears/ReelScore/apps/web/.next/server/webpack-runtime.js:33:42)
apps/web dev:     at eval (movies/page.tsx:9:65)
apps/web dev:     at (rsc)/./src/app/(main)/(browse)/movies/page.tsx (/home/liamwears/ReelScore/apps/web/.next/server/app/(main)/(browse)/movies/page.js:379:1)

7 replies

TtRPC

•Created by BillyBob on 3/21/2024 in #❓-help

Type '[]' has no properties in common with type 'MutateOptions<{ id: string....

Is it possible to get this to work? i am trying to make a single action that works across 2 routers.

const DeleteMedia = ({
  id,
  router,
}: {
  id: string
  router: keyof Pick<AppRouter, 'movieRouter' | 'serieRouter'>
}) => {
  const { refresh } = useRouter()
  const utils = api.useUtils()
  const deleteMedia = api[router].delete.useMutation({
    onSuccess: async (m) => {
      toast.success('Media Removed', { description: m.title })
      utils[router].list.invalidate()
      refresh()
    },
    onError: (error) => toast.error(error.message),
  })
  return (
    <form action={() => deleteMedia.mutate({ id })}> // Error here over deleteMedia
      <Button size="card" variant="card" type="submit">
        <XCircleIcon />
        Remove
      </Button>
    </form>
  )
}

const DeleteMedia = ({
  id,
  router,
}: {
  id: string
  router: keyof Pick<AppRouter, 'movieRouter' | 'serieRouter'>
}) => {
  const { refresh } = useRouter()
  const utils = api.useUtils()
  const deleteMedia = api[router].delete.useMutation({
    onSuccess: async (m) => {
      toast.success('Media Removed', { description: m.title })
      utils[router].list.invalidate()
      refresh()
    },
    onError: (error) => toast.error(error.message),
  })
  return (
    <form action={() => deleteMedia.mutate({ id })}> // Error here over deleteMedia
      <Button size="card" variant="card" type="submit">
        <XCircleIcon />
        Remove
      </Button>
    </form>
  )
}

3 replies

TtRPC

•Created by BillyBob on 3/1/2024 in #❓-help

onSuccess with createTRPCProxyClient

What is the best way to setup onSuccess with createTRPCProxyClient?

2 replies

TtRPC

•Created by BillyBob on 2/6/2024 in #❓-help

Reusable Component to take router as props / dependency injection. How to type?

for example:

export const Content = async ({ api }) => {
  const items = await api.getAll.query({ watched: true })

  if (!items) {
    return <EmptyState />
  }

  return (
    <CardsContainer>
      {items.map((i) => {
        return <Card key={i.id} imgSrc={buildImgSrc(i.posterPath)} {...i} />
      })}
    </CardsContainer>
  )
}

export const Content = async ({ api }) => {
  const items = await api.getAll.query({ watched: true })

  if (!items) {
    return <EmptyState />
  }

  return (
    <CardsContainer>
      {items.map((i) => {
        return <Card key={i.id} imgSrc={buildImgSrc(i.posterPath)} {...i} />
      })}
    </CardsContainer>
  )
}

Content is either movies or series. I have movieRouter and seriesRouter with the same procedures. How can i type api ?

42 replies

TtRPC

•Created by BillyBob on 1/15/2024 in #❓-help

tRPC, NextJS 14, createTRPCProxyClient, How can I globally manage errors?

I want to be able to redirect a user when they become unauthenticated. Someone else mentioned to create some NextJS middleware which makes an api call for the user but then that will make an extra API call for every tRPC request. It feels like there should be someway I can centrally manage errors where if tRPC returns an 'UNAUTHORIZED' error for any procedure I can do a redirect to '/login' I have a monorepo with everything together but the apps will be deployed separately eventually.

22 replies

TtRPC

•Created by BillyBob on 12/8/2023 in #❓-help

Help understanding how to deploy tRPC in monorepo.

Hi All, I read in the FAQ that most benefits come from using tRPC in a monorepo. So if i want to build an app, that for example used tRPC with Fastify and a nextJS frontend. How exactly would this be deployed? Would it still work as expected if deploying the client and server separately to different ec2 instances for example. Am i right in thinking that the benefit comes with the type safety during development so how its deployed does not really matter?