Viszy A Posts - Answer Overflow

Viszy A

Explore posts from servers

•Created by Viszy A on 1/1/2024 in #questions

Nested query fails because query by id is different between nested relations

I fell into this nested query and I'm not sure if I'm setting of the db right I have a User > Company > Testimonal relation which is tied together by the cuid() But when I check the data in prisma studio, the Company @id is different thatn the id in User. So I'm guessing that is the issue, but when I try to use where: { } by something else like userID instead of id It says id is required, and it doesn't work. I'm honestly stuck and have no idea how to move forward.

2 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 12/30/2023 in #questions

Need help with creating a mutation that involves relations

I'm a complete beginner just started and I'm really confused on how I will create this router with the mutation with all the relations The schema is pretty big so I'll show one relation:

model Profile {
  id                String           @id @default(cuid())
  experiences       Experience[]

}

model Experience {
  id              String   @id @default(cuid())
  companyName     String
  Profile         Profile? @relation(fields: [profileId], references: [id])
  profileId       String?
}

model Profile {
  id                String           @id @default(cuid())
  experiences       Experience[]

}

model Experience {
  id              String   @id @default(cuid())
  companyName     String
  Profile         Profile? @relation(fields: [profileId], references: [id])
  profileId       String?
}

So the inputed array could be with multiple "experiences" data : { experiences: [ {.... experience 1}, {... experience 2}, ... etc
], } And I want to create a mutation that can take that entire data and input it into the profile model, and this is my attempt on it, but i have no idea on how to make it actually work

import { z } from "zod";
import {
    createTRPCRouter,
    protectedProcedure,
    publicProcedure,
} from "@/server/api/trpc";

export const profileRouter = createTRPCRouter({
    createProfile: protectedProcedure
        .input(z.object({
           
            experiences: z.array(z.object({
                companyName: z.string(),
            
            })),
         
        }))
        .mutation(async ({ ctx, input }) => {
             return ctx.db.profile.create({
                data: {
                    experiences: {
                        ctx.db.experiences.create(input.experiences),
                    },
                },
            });
        }),
});

import { z } from "zod";
import {
    createTRPCRouter,
    protectedProcedure,
    publicProcedure,
} from "@/server/api/trpc";

export const profileRouter = createTRPCRouter({
    createProfile: protectedProcedure
        .input(z.object({
           
            experiences: z.array(z.object({
                companyName: z.string(),
            
            })),
         
        }))
        .mutation(async ({ ctx, input }) => {
             return ctx.db.profile.create({
                data: {
                    experiences: {
                        ctx.db.experiences.create(input.experiences),
                    },
                },
            });
        }),
});

4 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 11/15/2023 in #questions

How do I actually use tRPC without using a server component

Here is the error I'm getting:

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

and this is concerning this file:

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Input } from "@/app/_components/ui/input"
import { useToast } from "@/app/_components/ui/use-toast"
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";

export default async function ProfileForm() {
    const { toast } = useToast()

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
    })

    async function onSubmit(data: z.infer<typeof formSchema>) {
        console.log(data)
        toast({
            title: "Form submitted!",
            description: "Friday, February 10, 2023 at 5:57 PM",
        })
        await api.onboarding.form.mutate({ name: data.username })
    }
    return (
        (deteted the data here)
    )
}

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { Input } from "@/app/_components/ui/input"
import { useToast } from "@/app/_components/ui/use-toast"
import { getServerAuthSession } from "@/server/auth";
import { api } from "@/trpc/server";

export default async function ProfileForm() {
    const { toast } = useToast()

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
    })

    async function onSubmit(data: z.infer<typeof formSchema>) {
        console.log(data)
        toast({
            title: "Form submitted!",
            description: "Friday, February 10, 2023 at 5:57 PM",
        })
        await api.onboarding.form.mutate({ name: data.username })
    }
    return (
        (deteted the data here)
    )
}

4 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 11/15/2023 in #questions

How do I actually use tRPC without using a server component

Here is the error I'm getting:

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

./src/trpc/server.ts
ReactServerComponentsError:

You're importing a component that needs next/headers. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ╭─[/Users/viszya/Developer/Projects/sparktup/src/trpc/server.ts:3:1]
 3 │   loggerLink,
 4 │   unstable_httpBatchStreamLink,
 5 │ } from "@trpc/client";
 6 │ import { cookies } from "next/headers";
   · ───────────────────────────────────────
 7 │ 
 8 │ import { type AppRouter } from "@/server/api/root";
 9 │ import { getUrl, transformer } from "./shared";
   ╰────

One of these is marked as a client entry with "use client":
  ./src/trpc/server.ts
  ./src/app/_components/onboarding/form.tsx

1 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 11/5/2023 in #questions

How do I fix this query, I was following a tutorial that doesn't use the t3 stack

I'm trying to replicate this query (shown below) into t3 stack but the "onSuccess" property doesn't match and I don't know what I should change to make this work This is the error:

Argument of type '{ onSuccess: ({ success }: { success: boolean; }) => void; onError: (err: {    data: {        code: string;    };}) => void; retry: boolean; retryDelay: number; }' is not assignable to parameter of type 'ProcedureOptions'.
  Object literal may only specify known properties, and 'onSuccess' does not exist in type 'ProcedureOptions'.t"

Argument of type '{ onSuccess: ({ success }: { success: boolean; }) => void; onError: (err: {    data: {        code: string;    };}) => void; retry: boolean; retryDelay: number; }' is not assignable to parameter of type 'ProcedureOptions'.
  Object literal may only specify known properties, and 'onSuccess' does not exist in type 'ProcedureOptions'.t"

This is the client code where I call the query in

src/app/auth-callback/page.tsx

src/app/auth-callback/page.tsx

const router = useRouter()

    const searchParams = useSearchParams()
    const origin = searchParams.get('origin')

    const query = api.auth.authCallback.query(undefined, {
        onSuccess: ({ success } : { success: boolean }) => {
            if (success) {
                // user is synced to db
                router.push(origin ? `/${origin}` : '/dashboard')
            }
        },
        onError: (err: { data: { code: string } }) => {
            if (err.data?.code === 'UNAUTHORIZED') {
                router.push('/sign-in')
            }
        },
        retry: true,
        retryDelay: 500,
    })

const router = useRouter()

    const searchParams = useSearchParams()
    const origin = searchParams.get('origin')

    const query = api.auth.authCallback.query(undefined, {
        onSuccess: ({ success } : { success: boolean }) => {
            if (success) {
                // user is synced to db
                router.push(origin ? `/${origin}` : '/dashboard')
            }
        },
        onError: (err: { data: { code: string } }) => {
            if (err.data?.code === 'UNAUTHORIZED') {
                router.push('/sign-in')
            }
        },
        retry: true,
        retryDelay: 500,
    })

5 replies

TtRPC

•Created by Viszy A on 4/25/2023 in #❓-help

Getting this error: Cannot read properties of undefined (reading 'upsert')

I'm using the T3 Stack. And I'm fairly new to tRPC so I am not sure what this error is caused. I'm getting data from chess.com and monkey type using their APIs, the request is all good, and I'm trying to save the data in a prisma db. In my tRPC function, I'm using one private procedure with a mutation that has 2 upserts that each change 2 different models in prisma. When I try to run it i get this error: Cannot read properties of undefined (reading 'upsert') Also to note, before adding the second upsert, it was working fine. Is the problem using 2 upserts?

3 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 3/14/2023 in #questions

How are you supposed to use local fonts in taliwindcss

I'm not currently using the t3 stack, but how are you supposed to use locally downloaded fonts in tailwindcss. I tried to look at the docs but they don't include anything on local fonts and an online search leads me to outdated ones.

2 replies

TTCTheo's Typesafe Cult

•Created by Viszy A on 2/13/2023 in #questions

Next Auth Google not working ('client_id is required')

Hi, just started out. I changed all the DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET to GOOGLE_CLIENT_ID and GOOGLE_CLIENT SECRENT, in auth.ts, env.mjs, and .env (please let me know if you need to see the files) I get this error in local :

[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error client_id is required {
  error: {
    message: 'client_id is required',
    stack: 'TypeError: client_id is required\n' +
      '    at new BaseClient (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\openid-client\\lib\\client.js:178:13)\n' +
      '    at new Client (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\openid-client\\lib\\client.js:1789:7)\n' +
      '    at openidClient (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\next-auth\\core\\lib\\oauth\\client.js:28:18)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async getAuthorizationUrl (C:\\Users\\vishw.LAPTOP-1
    name: 'TypeError'
  },
  providerId: 'google',
  message: 'client_id is required'
}

[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error client_id is required {
  error: {
    message: 'client_id is required',
    stack: 'TypeError: client_id is required\n' +
      '    at new BaseClient (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\openid-client\\lib\\client.js:178:13)\n' +
      '    at new Client (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\openid-client\\lib\\client.js:1789:7)\n' +
      '    at openidClient (C:\\Users\\vishw.LAPTOP-1V3S8DHR.000\\dev\\projects\\web\\progressapp\\progressapp\\node_modules\\next-auth\\core\\lib\\oauth\\client.js:28:18)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n' +
      '    at async getAuthorizationUrl (C:\\Users\\vishw.LAPTOP-1
    name: 'TypeError'
  },
  providerId: 'google',
  message: 'client_id is required'
}

3 replies

Gaming

Programming