Theo's Typesafe Cult•7mo ago

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,
    })

3 Replies

Viszy A•7mo ago

I tried to replicate it into this query, but then nextjs gives me an error because i use "use client" in the

src/app/auth-callback/page.tsx

src/app/auth-callback/page.tsx

same place where I put the query in, and apparently nextjs does allow use Client in a parent function of a server component which is

server.ts

server.ts

and I don't know how to fix this either.

    const router = useRouter()

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

    api.auth.authCallback.query().then(({ success }) => {
        if (success) {
            // user is synced to db
            router.push(origin ? `/${origin}` : '/dashboard')
        }
    }).catch((error) => {
        if (error.data?.code === 'UNAUTHORIZED') {
            router.push('/sign-in')
        }
    })

    const router = useRouter()

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

    api.auth.authCallback.query().then(({ success }) => {
        if (success) {
            // user is synced to db
            router.push(origin ? `/${origin}` : '/dashboard')
        }
    }).catch((error) => {
        if (error.data?.code === 'UNAUTHORIZED') {
            router.push('/sign-in')
        }
    })

And this is the procedure from which I am calling from:

export const authRouter = createTRPCRouter({
    authCallback: publicProcedure.query(async () => {
        const { getUser } = getKindeServerSession()
        const user = await getUser()

        if (!user.id || !user.email)
            throw new TRPCError({ code: 'UNAUTHORIZED' })

        // check if the user is in the database
        const dbUser = await db.user.findFirst({
            where: {
                id: user.id,
            },
        })

        if (!dbUser) {
            // create user in db
            await db.user.create({
                data: {
                    id: user.id,
                    email: user.email,
                },
            })
        }

        return { success: true }
    }),
})

export const authRouter = createTRPCRouter({
    authCallback: publicProcedure.query(async () => {
        const { getUser } = getKindeServerSession()
        const user = await getUser()

        if (!user.id || !user.email)
            throw new TRPCError({ code: 'UNAUTHORIZED' })

        // check if the user is in the database
        const dbUser = await db.user.findFirst({
            where: {
                id: user.id,
            },
        })

        if (!dbUser) {
            // create user in db
            await db.user.create({
                data: {
                    id: user.id,
                    email: user.email,
                },
            })
        }

        return { success: true }
    }),
})

iDarkLightning•7mo ago

You're using the vanilla client not trpc/react

Xanacas•7mo ago

+ if you're using a Server-Component in a Clientcomponent, all the data for the Server Component needs to be available on the request. Means you must pass the server component from a server component as a child to the client component. Like this:


// server rendered page.tsx
...
return 
<ClientComponent whatEverProps={...someData}>
   <ServerRenderedChildComponent optionalData={...someData} />
</ClientComponent>

Gaming

Programming

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