Mads Posts - Answer Overflow

Mads

•Created by Mads on 3/29/2024 in #questions

Prisma w/pgvector

Hey, we got this t3 app, but Prisma does not support vectors when trying to query the column that's set to vector type (with pgvector database extension enabled). When trying to raw query instead it say's it's not able to serialize. So therefore I tried to extend the prisma client with the custom query but there is absolutely no intellisense or types following my change, and I believe it must be because I'm not doing it correctly. Below in the comments I've attached the relevant files.. Please tell me if I'm missing a change somewhere.

6 replies

TTCTheo's Typesafe Cult

•Created by Mads on 8/11/2023 in #questions

Debugging the endpoints

Hi, how does one debug the endpoints with breakpoints?

1 replies

TTCTheo's Typesafe Cult

•Created by Mads on 7/15/2023 in #questions

Add rest of User prisma table types and data to nextauth session in auth.ts

Hi, how can I add all the user data to the session including user table specified values and not just nextAuth? My current setup in the scaffolded T3 auth.ts is the following:

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: number;
      gender: boolean | null;
      birthdate: string | null;
      // ...other properties
      // role: UserRole;
    } & DefaultSession["user"];
  }
}

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: number;
      gender: boolean | null;
      birthdate: string | null;
      // ...other properties
      // role: UserRole;
    } & DefaultSession["user"];
  }
}

/**
 * Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
 *
 * @see https://next-auth.js.org/configuration/options
 */
export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        ...user,
        id: parseInt(user.id)
      },
    }),
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
    LinkedInProvider({
      clientId: env.LINKEDIN_CLIENT_ID,
      clientSecret: env.LINKEDIN_CLIENT_SECRET,
    }),
    /**
     * ...add more providers here.
     *
     * Most other providers require a bit more work than the Discord provider. For example, the
     * GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
     * model. Refer to the NextAuth.js docs for the provider you want to use. Example:
     *
     * @see https://next-auth.js.org/providers/github
     */
  ],
  pages: {
    signIn: '/auth/signin'
  }
};

/**
 * Options for NextAuth.js used to configure adapters, providers, callbacks, etc.
 *
 * @see https://next-auth.js.org/configuration/options
 */
export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        ...user,
        id: parseInt(user.id)
      },
    }),
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: env.GOOGLE_CLIENT_ID,
      clientSecret: env.GOOGLE_CLIENT_SECRET,
    }),
    LinkedInProvider({
      clientId: env.LINKEDIN_CLIENT_ID,
      clientSecret: env.LINKEDIN_CLIENT_SECRET,
    }),
    /**
     * ...add more providers here.
     *
     * Most other providers require a bit more work than the Discord provider. For example, the
     * GitHub provider requires you to add the `refresh_token_expires_in` field to the Account
     * model. Refer to the NextAuth.js docs for the provider you want to use. Example:
     *
     * @see https://next-auth.js.org/providers/github
     */
  ],
  pages: {
    signIn: '/auth/signin'
  }
};

Is this the correct way to add the prisma table colum types and data to the session?

7 replies

TTCTheo's Typesafe Cult

•Created by Mads on 7/14/2023 in #questions

Next-auth error handling on oauth problems

Hi, I have this oAuth custom sign-in page, and I have huge problems with figuring out why I can't access the errors returned from sign-in with a provider...

import { getProviders, signIn } from 'next-auth/react'
import type { Provider } from 'next-auth/providers'
import ProviderButton from '~/components/ProviderButton';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { toast, ToastContainer } from 'react-toastify';

interface SignInProps {
    providers: Provider[]
}

const SignIn: React.FC<SignInProps> = ({ providers }) => {
    const { data, status } = useSession();
    const router = useRouter();
    if (data?.user && router.pathname === '/auth/signin') {
        void router.push('/')
    }

    const handleSignIn = (provider: Provider) => {
        signIn(provider.id, { redirect: false })
            .then((res) => {
            console.log(res);
            })
            .catch((err) => {
                console.log(err);
            })
    }
   ... JSX

import { getProviders, signIn } from 'next-auth/react'
import type { Provider } from 'next-auth/providers'
import ProviderButton from '~/components/ProviderButton';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { toast, ToastContainer } from 'react-toastify';

interface SignInProps {
    providers: Provider[]
}

const SignIn: React.FC<SignInProps> = ({ providers }) => {
    const { data, status } = useSession();
    const router = useRouter();
    if (data?.user && router.pathname === '/auth/signin') {
        void router.push('/')
    }

    const handleSignIn = (provider: Provider) => {
        signIn(provider.id, { redirect: false })
            .then((res) => {
            console.log(res);
            })
            .catch((err) => {
                console.log(err);
            })
    }
   ... JSX

What is the correct way to do this error handling? Nothing is returned from res or catch err, and the page refreshes 😮

1 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/7/2023 in #questions

Modify user model in Prisma on signup

Hi amazing people, I'm still learning the stack and I love the type safety! My question is: I added a new column to the user model called isSetup for when the user is new or need to have some required properties filled out. When the user uses nextauth to authenticate how can I add a default false value to the column on register through one of the providers? I added all the modules in the stack so it's the full blown t3 generated app. Feel free to tell me if my question was confusing as I'm not sure how to formulate it 🙂

3 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/6/2023 in #questions

tRPC router refreshes and gives 429 HTTP error

I am implementing a new "endpoint" as from what I have understood. The tRPC looks like the following:

export const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: publicProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

export const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: publicProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

I query this in the frontend like so:

const { data, isLoading } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  });

const { data, isLoading } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  });

My problem is that I think something with the async function is messing up, it gives me a 429 error meaning I am sending too many requests, and I really don't understand why the data is not being fetched.

5 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

What is the convention for customizing sign-in pages in NextAuth

Is there any example of custom pages for NextAuth authentication, something that I can follow the similar setup from as with my generated T3 app? Bear in my mind I did read the NextAuth documentation - but I am still having trouble with figuring out why the setup as they described won't work, and I think it must have something to do with how the server and client structure is setup. I followed this example: https://next-auth.js.org/configuration/pages

12 replies

TTCTheo's Typesafe Cult

•Created by Mads on 4/5/2023 in #questions

How to create new tRPC api route calling external api

Hi I have this app where I want to add a new prompt api route in server/api/routers/prompt.ts of the generated T3 app with all modules selected on install. The code I'm trying to run:

import { z } from "zod";

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";
import { env } from "~/env.mjs";
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
    apiKey: env.OPEN_AI_KEY
});

const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: protectedProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

import { z } from "zod";

import {
  createTRPCRouter,
  protectedProcedure,
} from "~/server/api/trpc";
import { env } from "~/env.mjs";
import { Configuration, OpenAIApi } from "openai";

const configuration = new Configuration({
    apiKey: env.OPEN_AI_KEY
});

const openai = new OpenAIApi(configuration);

const getStory = async (storySummary: string, title: string) => {
    const response = await openai.createCompletion({
        model: "text-davinci-003",
        prompt: `Write me a story based on the story summary:
        ${storySummary}

        with the title:
        ${title}
        `
    })

    return response;
}
export const promptRouter = createTRPCRouter({
  createStory: protectedProcedure
    .input(z.object({ 
        storySummary: z.string(),
        title: z.string()
    }))
    .query(async ({ input }) => {
        const response = await getStory(input.storySummary, input.title);

        return response.data;
    })
});

after the code above in the prompt.ts file created I attach it to the root.ts of the routers - just like with the example.ts file and proceed to call it in my client like so:

import React from 'react'
import { api } from '~/utils/api'
const Prompt = () => {
  const { data: response } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  })
  return (
    <div className='bg-white md:px-6 mb-6 mt-2 shadow-lg rounded-md'>
        {response?.choices[0]?.text ?? 'Response is undefined'}
    </div>
  )
}

export default Prompt;

import React from 'react'
import { api } from '~/utils/api'
const Prompt = () => {
  const { data: response } = api.prompt.createStory.useQuery({ 
    storySummary: 'A little piggy lost her family in a giant thunderstorm and had to live by herself',
    title: 'The piggy tale'
  })
  return (
    <div className='bg-white md:px-6 mb-6 mt-2 shadow-lg rounded-md'>
        {response?.choices[0]?.text ?? 'Response is undefined'}
    </div>
  )
}

export default Prompt;

This gives me a 429 tRPC error when called and I unfortunately have no idea and have been everywhere with the documentation available, any of you friendly developers that have an idea?

6 replies

Gaming

Programming