BillyBob Posts - Answer Overflow

BillyBob

Explore posts from servers

RReactiflux PCProjectDiscovery Community TtRPC TTCTheo's Typesafe Cult

Posts Comments

TTCTheo's Typesafe Cult

•Created by BillyBob on 7/7/2024 in #questions

Zod, Non numeric string

How can i with zod enforce something to be a string and make sure it doesnt contain any numbers

4 replies

TtRPC

•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/@[email protected]_@[email protected]/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/@[email protected]_@[email protected]/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

TTCTheo's Typesafe Cult

•Created by BillyBob on 3/24/2024 in #questions

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

../../node_modules/.pnpm/@[email protected]_@[email protected]/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/@[email protected]_@[email protected]/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)

22 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

TTCTheo's Typesafe Cult

•Created by BillyBob on 3/1/2024 in #questions

Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC

Looking for the best way to achieve the above. Any help appreciated. Can look at an existing GitHub Repo or Blog post

33 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

TTCTheo's Typesafe Cult

•Created by BillyBob on 1/16/2024 in #questions

How can I globally manage errors in tRPC ? Trying `redirect` in custom link does not seem to work

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.

import { redirect } from 'next/navigation'

export const customLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      const unsubscribe = next(op).subscribe({
        next(value) {
          observer.next(value)
        },
        error(err) {
          observer.error(err)
          if (err?.data?.code === 'UNAUTHORIZED') {
            redirect('/login')
          }
        },
        complete() {
          observer.complete()
        },
      })
      return unsubscribe
    })
  }
}

import { redirect } from 'next/navigation'

export const customLink: TRPCLink<AppRouter> = () => {
  return ({ next, op }) => {
    return observable((observer) => {
      const unsubscribe = next(op).subscribe({
        next(value) {
          observer.next(value)
        },
        error(err) {
          observer.error(err)
          if (err?.data?.code === 'UNAUTHORIZED') {
            redirect('/login')
          }
        },
        complete() {
          observer.complete()
        },
      })
      return unsubscribe
    })
  }
}

I've tested this custom link before the httpLink but the redirect does not seem to ever run. The console logs as expected. Is it something to do with the error still being thrown ?

5 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

TTCTheo's Typesafe Cult

•Created by BillyBob on 1/5/2024 in #questions

Why is create-t3-app using TRPCReactProvider and not createTRPCNext?

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

Gaming

Programming