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

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