Mocha Comments - Answer Overflow

Mocha

•Created by Peform on 4/28/2025 in #questions

mutation taking a long time to appear after prefetching query

Yes, data.error won't behave like you expect it to. Using error.tsx will allow you to show an error message.

// ./error.tsx
'use client'

export default function Error({ error }: { error: Error }) {
    return <p>Error: {error.message}</p>
}

// ./error.tsx
'use client'

export default function Error({ error }: { error: Error }) {
    return <p>Error: {error.message}</p>
}

What I like to do instead is to just return the error as a value. This gets rid of many unexpected behaviors.

'use server'

export default async function Content({ guildId, uuid, session }: Props) {
    const isCaptchaValid = await api.verification.isCaptchaValid({
        guildId,
        uuid,
    })

    if (isCaptchaValid.error) {
        return (
            <InvalidCaptcha
                session={session}
                error={isCaptchaValid.error.message ?? 'Invlaid captcha'}
                showLoggedInAs
            />
        )
    }

    return <h1>success</h1>
}

'use server'

export default async function Content({ guildId, uuid, session }: Props) {
    const isCaptchaValid = await api.verification.isCaptchaValid({
        guildId,
        uuid,
    })

    if (isCaptchaValid.error) {
        return (
            <InvalidCaptcha
                session={session}
                error={isCaptchaValid.error.message ?? 'Invlaid captcha'}
                showLoggedInAs
            />
        )
    }

    return <h1>success</h1>
}

Also if your Content component really looks like that, you don't need it to be a Client Component.

11 replies

TTCTheo's Typesafe Cult

•Created by Peform on 4/28/2025 in #questions

mutation taking a long time to appear after prefetching query

Also handle if (...) redirect() before prefetch() not after it

11 replies

TTCTheo's Typesafe Cult

•Created by Peform on 4/28/2025 in #questions

mutation taking a long time to appear after prefetching query

Notice how there's no error or isLoading with useSuspenseQuery because both are handled by the parent's Suspense Handle loading with fallback='Loading...' or with a loading.tsx file Handle errors with error.tsx files

11 replies

TTCTheo's Typesafe Cult

•Created by Peform on 4/28/2025 in #questions

mutation taking a long time to appear after prefetching query

There are 2 ways you can use prefetch. First, call prefetch from the parent (must be server).

'use server'

import { Suspense } from 'react'
import { api, HydrateClient } from '~/trpc/server'

export async function Parent() {
    void api.user.team.prefetch()

    return (
        <HydrateClient>
            <Suspense fallback={<div>Loading...</div>}>
                <Child />
            </Suspense>
        </HydrateClient>
    )
}

'use server'

import { Suspense } from 'react'
import { api, HydrateClient } from '~/trpc/server'

export async function Parent() {
    void api.user.team.prefetch()

    return (
        <HydrateClient>
            <Suspense fallback={<div>Loading...</div>}>
                <Child />
            </Suspense>
        </HydrateClient>
    )
}

Then use the query from either a client or server component.

'use server'

import { api } from '~/trpc/server'

export async function Child() {
    const team = await api.user.team()

    return <div>{team.name}</div>
}

'use server'

import { api } from '~/trpc/server'

export async function Child() {
    const team = await api.user.team()

    return <div>{team.name}</div>
}

'use client'

import { api } from "~/trpc/react"

export function Child() {
  const [team] = api.user.team.useSuspenseQuery()

  return <div>{team.name}</div>
}

'use client'

import { api } from "~/trpc/react"

export function Child() {
  const [team] = api.user.team.useSuspenseQuery()

  return <div>{team.name}</div>
}

11 replies

TTCTheo's Typesafe Cult

•Created by Peform on 4/28/2025 in #questions

mutation taking a long time to appear after prefetching query

const [isCaptchaValid] = api.verification.isCaptchaValid.useSuspenseQuery({
    guildId,
    uuid,
})

const [isCaptchaValid] = api.verification.isCaptchaValid.useSuspenseQuery({
    guildId,
    uuid,
})

11 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 8/26/2024 in #questions

Migrating from T3 to T3 Turborepo

That makes senese. I've got Apple Silicon too.

13 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 8/26/2024 in #questions

Migrating from T3 to T3 Turborepo

I can't share the source code, but the problem I'm having is probably with the new setup requiring the /packages folder. I'll search for a newer guide.

13 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 8/26/2024 in #questions

Migrating from T3 to T3 Turborepo

Do you get the same error when going directly with create-t3-turbo ?

13 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 8/26/2024 in #questions

Migrating from T3 to T3 Turborepo

Thanks! Seems like a lot has changed since then, so it's been taking me a little more than two hours. It links to some nonexistent files. I'm using Clerk and Drizzle. They assume NextAuth and Prisma. I'm getting this error when trying to run the root turbo install.

ERR_PNPM_CATALOG_ENTRY_NOT_FOUND_FOR_SPEC  No catalog entry 'prettier' was found for catalog 'default'.

ERR_PNPM_CATALOG_ENTRY_NOT_FOUND_FOR_SPEC  No catalog entry 'prettier' was found for catalog 'default'.

13 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/13/2024 in #questions

Next.js API Type Safety without tRPC?

TanStack libraries are awesome. Do you have some sample code or article that talks about this setup? Seems to me that the library works best either with tRPC or with external APIs. I haven't been able to find the "define a function and call it" experience anywhere else.

10 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/13/2024 in #questions

Next.js API Type Safety without tRPC?

It was this issue that's currently fixed, but I just prefer not having a dependency if I don't really need it. If I could achieve almost the same results without tRPC, then it's better to remove this layer and keep the setup simple to develop and to debug

10 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/12/2024 in #questions

[TRPCClientError]: Converting circular structure to JSON

idk what the issue was, but I recreated the setup and it works now

9 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/13/2024 in #questions

Next.js API Type Safety without tRPC?

Yes, but I'm talking about things other than Server Actions. They're not ideal for everything. That's why people still use tRPC with App Router.

10 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/13/2024 in #questions

Next.js API Type Safety without tRPC?

Yes, but I'm asking about the client side

10 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/12/2024 in #questions

[TRPCClientError]: Converting circular structure to JSON

For context, here's my createTRPCContext:

export async function createTRPCContext(_: { headers: Headers }) {
  const session = auth()
  return {
    userId: session.userId,
    orgId: session.orgId,
    orgSlug: session.orgSlug,
    db: supabase,
  }
}

export async function createTRPCContext(_: { headers: Headers }) {
  const session = auth()
  return {
    userId: session.userId,
    orgId: session.orgId,
    orgSlug: session.orgSlug,
    db: supabase,
  }
}

And supabase is exported from:

import { env } from '~/env'
import { createClient } from '@supabase/supabase-js'
import type { Database } from '~/db'

export const supabase = createClient<Database>(
  env.SUPABASE_URL,
  env.SUPABASE_ANON_KEY
)

import { env } from '~/env'
import { createClient } from '@supabase/supabase-js'
import type { Database } from '~/db'

export const supabase = createClient<Database>(
  env.SUPABASE_URL,
  env.SUPABASE_ANON_KEY
)

9 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/12/2024 in #questions

[TRPCClientError]: Converting circular structure to JSON

Yes, but I didn't know where to start looking, especially since everything has been working fine for weeks without touching the code or anything around the code. It's a deeper issue that occurs at this function

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId || !ctx.orgId || !ctx.orgSlug) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: JSON.stringify(ctx),
    })
  }
    
  return next({
    ctx: {
      userId: ctx.userId,
      orgId: ctx.orgId,
      orgSlug: ctx.orgSlug,
    },
   })
})

const enforceUserIsAuthed = t.middleware(async ({ ctx, next }) => {
  if (!ctx.userId || !ctx.orgId || !ctx.orgSlug) {
    throw new TRPCError({
      code: 'UNAUTHORIZED',
      message: JSON.stringify(ctx),
    })
  }
    
  return next({
    ctx: {
      userId: ctx.userId,
      orgId: ctx.orgId,
      orgSlug: ctx.orgSlug,
    },
   })
})

so I updated the code. It still gave me an error, but the error is just the ctx object that I passed, so we don't know what it actually is

import { stringify } from 'flatted'
///
  message: stringify(ctx),

import { stringify } from 'flatted'
///
  message: stringify(ctx),

9 replies

TTCTheo's Typesafe Cult

•Created by beebae on 5/13/2024 in #questions

project idea suggestion?

Resizing, removing backgrounds, converting types, SVG to image

5 replies

TTCTheo's Typesafe Cult

•Created by WellDon on 5/12/2024 in #questions

Have you tried mentorship

What's your goal?

2 replies

TTCTheo's Typesafe Cult

•Created by Mocha on 5/12/2024 in #questions

[TRPCClientError]: Converting circular structure to JSON

And sometimes I get this in server logs:

[97;46m << query [1;97;46m #1 log.logs [0m {
  input: undefined,
  result: l [TRPCClientError]: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at l.from (/var/task/.next/server/chunks/696.js:7:53047)
      at /var/task/.next/server/app/activity/page.js:1:48095
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        ... 5 lines matching cause stack trace ...
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      code: 'INTERNAL_SERVER_ERROR',
      name: 'TRPCError',
      [cause]: TypeError: Converting circular structure to JSON
          --> starting at object with constructor 'Timeout'
          |     property '_idlePrev' -> object with constructor 'TimersList'
          --- property '_idleNext' closes the circle
          at JSON.stringify (<anonymous>)
          at /var/task/.next/server/chunks/101.js:1:12977
          at t (/var/task/.next/server/chunks/338.js:13:359299)
          at a (/var/task/.next/server/chunks/338.js:13:359613)
          at c (/var/task/.next/server/chunks/338.js:13:353322)
          at /var/task/.next/server/app/activity/page.js:1:47939
          at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    }
  },
  elapsedMs: 47
}

[97;46m << query [1;97;46m #1 log.logs [0m {
  input: undefined,
  result: l [TRPCClientError]: Converting circular structure to JSON
      --> starting at object with constructor 'Timeout'
      |     property '_idlePrev' -> object with constructor 'TimersList'
      --- property '_idleNext' closes the circle
      at l.from (/var/task/.next/server/chunks/696.js:7:53047)
      at /var/task/.next/server/app/activity/page.js:1:48095
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
    meta: undefined,
    shape: undefined,
    data: undefined,
    [cause]: TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'Timeout'
        |     property '_idlePrev' -> object with constructor 'TimersList'
        --- property '_idleNext' closes the circle
        at JSON.stringify (<anonymous>)
        ... 5 lines matching cause stack trace ...
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
      code: 'INTERNAL_SERVER_ERROR',
      name: 'TRPCError',
      [cause]: TypeError: Converting circular structure to JSON
          --> starting at object with constructor 'Timeout'
          |     property '_idlePrev' -> object with constructor 'TimersList'
          --- property '_idleNext' closes the circle
          at JSON.stringify (<anonymous>)
          at /var/task/.next/server/chunks/101.js:1:12977
          at t (/var/task/.next/server/chunks/338.js:13:359299)
          at a (/var/task/.next/server/chunks/338.js:13:359613)
          at c (/var/task/.next/server/chunks/338.js:13:353322)
          at /var/task/.next/server/app/activity/page.js:1:47939
          at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    }
  },
  elapsedMs: 47
}

9 replies

TTCTheo's Typesafe Cult

•Created by Huilen on 3/31/2024 in #questions

Im a newbie creating a document editor and idk how to setup an architecture to save the data

Yes, especially if this is a personal project, please ignore that and just try to ship something functional as soon as you can. Nothing else matters before production. You can always optimize later, when you know more about what you wanna do!

16 replies

Gaming

Programming