cupofcrypto Posts - Answer Overflow

cupofcrypto

•Created by cupofcrypto on 6/20/2024 in #questions

How to build Drizzle explicit types

Call me dumb, but I don't fully get how we can have explicit types that we can easily import in the various components of the application. I've worked few months with Prisma, and over there you have the engine that's able to generate all the types that your queries will generate and you can import them as needed. As far as I can see, Drizzle ORM does not do that. While I feel that what it does is still great, they provide you the type definition with all the props properly typed but you don't have a way to import them. You rely on the implicit types that the query will expose. Don't you think that's kind of limiting your ability to have explicit types that you can import in your components? A quick example Let's say you have a component that display the values from the following query:

export async function getRoleBySlug(slug: string) {
  return await db.query.roles.findFirst({
    where: (role, { eq }) => eq(role.slug, slug),
    });    
}

export async function getRoleBySlug(slug: string) {
  return await db.query.roles.findFirst({
    where: (role, { eq }) => eq(role.slug, slug),
    });    
}

If I hover on the function name with VS Code I get the following message:

function getRoleBySlug(slug: string): Promise<{
    id: number;
    name: string;
    slug: string;
} | undefined>

function getRoleBySlug(slug: string): Promise<{
    id: number;
    name: string;
    slug: string;
} | undefined>

While this is semantically correct, how do you type the prop inside the component that will consume the result from this query? Are you doing something like this?

type Role = {
    id: number;
    name: string;
    slug: string;
}

export default function DisplayRole({ role }: { role: Role }) { 
    // Your component code...
}

type Role = {
    id: number;
    name: string;
    slug: string;
}

export default function DisplayRole({ role }: { role: Role }) { 
    // Your component code...
}

I mean, doesn't it feel "too much"? An approach with drizzle-zod I've started to use drizzle-zod since I already use zod inside my application, and now in each of my schemas I add the following:

import { createInsertSchema, createSelectSchema } from 'drizzle-zod';

const roles = pgTable('roles', {
  id: serial('id').primaryKey(),
  slug: varchar('slug', { length: 255 }).unique().notNull(),
  name: varchar('name', { length: 255 }).notNull(),
});

export const rolesInsertSchema = createInsertSchema(roles);
export const rolesSelectSchema = createSelectSchema(roles);

export default roles;

import { createInsertSchema, createSelectSchema } from 'drizzle-zod';

const roles = pgTable('roles', {
  id: serial('id').primaryKey(),
  slug: varchar('slug', { length: 255 }).unique().notNull(),
  name: varchar('name', { length: 255 }).notNull(),
});

export const rolesInsertSchema = createInsertSchema(roles);
export const rolesSelectSchema = createSelectSchema(roles);

export default roles;

And then I find myself generating the types inside my index.d.ts file like so:

import type { roleSelectSchema } from '@/src/drizzle/schema/roles';

export type Role = z.infer<typeof roleSelectSchema>;

import type { roleSelectSchema } from '@/src/drizzle/schema/roles';

export type Role = z.infer<typeof roleSelectSchema>;

So now I can go back to the previous <DisplayRole /> component and import the Role type. Do you have a better approach to make TypeScript fully working? Is probably my project not configured well enough to work with Drizzle?

4 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 2/16/2024 in #questions

Build a component library for Next.js w/ shadcn/ui

Hi all, so as per the topic, I am looking to build a component library for my company so I will be able to easily import the component I need with a simple npm i I already found some information on how set this up thanks to this article and the only thing I found specific about React Server Components is this article and nothing more. Now I know that I am probably falling for the analysis paralysis syndrome, but I like to have a clear plan of action before do something new (yes, this would be the first time I build a component library that I'll publish on NPM 😊) Since I will use shadcn/ui library, I was also studying how he managed to create the CLI since it looks to me an easier approach because instead of relying on my own packages hidden in the node_modules/ folder, I should be able to pull the components one by one and even customize them in case I need a quick fix. I'll start to experiment myself, but if someone of you already has experience with this approach it would be great if you want to share your knowledge.

3 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 2/1/2024 in #questions

Auth.js v5 issue with UntrustedHost

Hi all, I have hard times figuring out this issue. I am working on a Next.js 14 + Auth.js v5 project where I need to handle the login via a custom external REST API server built in Nest.js As far as I can see everything works quite nicely. I am able to login via the external server, store the access and refresh tokens in the session but I would like to use middleware.ts to handle few redirects. I am not a master at all when we talk about implementing a login system, tbh I relied all my career on third party tools and oAuth system. Also I am following this video from the Code With Antonio channel that's focused on v5. The thing is that when I try to check the content of req.auth in my middleware.ts that's passed to the auth function I always get the following even if the user is logged in.

{
  message: 'There was a problem with the server configuration. Check the server logs for more information.',
  code: 'UntrustedHost'
}

{
  message: 'There was a problem with the server configuration. Check the server logs for more information.',
  code: 'UntrustedHost'
}

The thing is that in my local dev env I have both the FE and BE under the http and even if I am able to load a certificate with the --experimental-https option in next dev, obviously this is still failing because I am making REST calls to an untrusted server. I tryed to leverage the trustHost: false option in auth.js but the situation is getting even worst because I get redirected to the /api/auth/error endpoint for next-auth. From the code example I rely on req.auth to check if user is logged in or not, but in this case the returned object is always set so to the app looks like the user is logged-in even though is not. Can you help me figure out what's going on? Thanks in advance guys

11 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 9/20/2023 in #questions

Not sure how to move forward with NextAuth and Web3

Hi all, I have to admit that I still have to experiment with the implementation but while documenting, I started to have some doubts that I would like to ask you first. I already have a T3 app running with the authentication handled by NextAuth and the Discord provider. Now I would like to allow people to also use their web3 wallet to sign in, but as far as I understood, this is pretty much a client authentication. Since I store the user session in the database, I wonder which would be the best approach to handle this situation. Many of the documentation and tutorials I saw they just ignore the database relying on JWT, but doing so does not get me away from how the app is set up? I have the following ideas on how to move forward, let me know which one is the best approach and please share your reasons behind that choice, so I can learn something new 😅 1. forget about NextAuth oAuth providers and only implement Web3 authentication 2. try to "merge" the two auth system even though I see this the more complicated one and don't know how to move forward 3. let NextAuth handle authentication via oAuth and then allow user to connect it's wallet afterwards I am thinking of going with the 3 option, so oAuth authentication and Web3 authentication does not fight and after user signed the access I can add the wallet to the "watchlist". PS: if you need to know what I am planning to do once user authenticates via Web3 I just want to list the token he holds and build his portfolio.

11 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 9/1/2023 in #questions

Why Prisma does not set the proper type for related field?

So I've been banging my head against this issue lately and it seems to me that the only way around is to create a separated ZodSchema to solve it. Thing is that in my PostgreSQL database I have an optional relation but when I query with that relation the type that I get back is still optional, even though I pass that to the query in order to get the rows 🤔 Here's for example, in my Transaction table the hodlId field is optional. But I am just passing it, so how it could be optional if that's the base of my query?

return (await ctx.prisma.transaction.findMany({
    where: {
        hodlId: input.hodlId,
    },
    orderBy: {
        createdAt: "desc",
    },
})) as PrismaHodlTransaction[];

return (await ctx.prisma.transaction.findMany({
    where: {
        hodlId: input.hodlId,
    },
    orderBy: {
        createdAt: "desc",
    },
})) as PrismaHodlTransaction[];

As you can see I had to create a separate type and cast it to the response. Is that the only way to do it? Dunno, every time I need to use a cast I feel of a stretch 😅

2 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 8/22/2023 in #questions

Best approach to limit free users

I am building an app with the T3 stack, so I have all the bells and whistles that it provides, including NextAuth I am getting ready to open the application for beta users, but I would like to limit their actions. I've already implemented a role that I leverage to display admin-only components on the UI. The thing is that I would like to limit the amount of information the user is able to save into the database. I was checking out shadcn Taxonomy demo project (https://github.com/shadcn-ui/taxonomy/blob/main/app/api/posts/route.ts) and it seems to me that I should add a check for every route that I want to limit the user. Is this the best approach or there is something more "centralized" that will allow us to implement such feature?

12 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 8/19/2023 in #questions

Typescript errors with `cloneElement`

Hi all 👋 So while building my app I faced an issue that really put my UI at test. As I am sure many of you already experienced, the design of our application (even if we're the ones creating it) is able to account only for a small amount of cases. For example, I designed a card where the text can grow quite a lot and am figuring out the best approach. Specific to this request though is the fact that when I use the cloneElement and I try to set a new className I get the following error message: Argument of type '{ className: string; }' is not assignable to parameter of type 'Partial<unknown> & Attributes' Here's my code:

const massagedChildren = Array.isArray(children)
  ? children.map((child: ReactNode) => {
      if (!isValidElement(child)) return child;

      return cloneElement(child, {
        className: cn(child.props.className, { block: isOverflowing }),
      });
    })
  : null;

const massagedChildren = Array.isArray(children)
  ? children.map((child: ReactNode) => {
      if (!isValidElement(child)) return child;

      return cloneElement(child, {
        className: cn(child.props.className, { block: isOverflowing }),
      });
    })
  : null;

If you need I can give you more context about why this code it's useful for my app, but I don't think it's related with the issue. Thanks for the help 🙏 PS: that code also has an error for child.props.className because it gets inferred an any type for child even though I check with isValidElement just few lines above.

4 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 7/3/2023 in #questions

Send setter to `props.children`

So I think this is silly, but at the same time I don't find a way out of it, so I am here asking for help. I am trying to make a Modal that can accept any children and that children will receive the setOpen fn to open/close the modal independently. Let's show some code:

interface AddGeneralModalProps
  extends DialogProps,
    VariantProps<typeof contentVariants> {}

const AddGeneralModal = ({ children, size }: AddGeneralModalProps) => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className={buttonVariants()}>Open Modal</Button>
      </DialogTrigger>
      <DialogContent className={cn(contentVariants({ size }))}>
        <DialogHeader>
          <DialogTitle>Modal Title</DialogTitle>
          <DialogDescription>
            Modal Desc
          </DialogDescription>
        </DialogHeader>

        {children}
      </DialogContent>
    </Dialog>
  );
};

export default AddGeneralModal;

// Usage:
const SpecificForm = () => {
  const { mutate } = api.model.post.useMutation({
    onSuccess: async () => {
      // Here I would like to close the modal
    },
  });

  return (
    <Form>
      <Button onClick={ () => mutate() }> Submit < /Button>
    </Form>
  )
}

const MyPage = () => {
  return (
    <AddGeneralModal>
      <SpecificForm />
    </AddGeneralModal>
  )
}

interface AddGeneralModalProps
  extends DialogProps,
    VariantProps<typeof contentVariants> {}

const AddGeneralModal = ({ children, size }: AddGeneralModalProps) => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button className={buttonVariants()}>Open Modal</Button>
      </DialogTrigger>
      <DialogContent className={cn(contentVariants({ size }))}>
        <DialogHeader>
          <DialogTitle>Modal Title</DialogTitle>
          <DialogDescription>
            Modal Desc
          </DialogDescription>
        </DialogHeader>

        {children}
      </DialogContent>
    </Dialog>
  );
};

export default AddGeneralModal;

// Usage:
const SpecificForm = () => {
  const { mutate } = api.model.post.useMutation({
    onSuccess: async () => {
      // Here I would like to close the modal
    },
  });

  return (
    <Form>
      <Button onClick={ () => mutate() }> Submit < /Button>
    </Form>
  )
}

const MyPage = () => {
  return (
    <AddGeneralModal>
      <SpecificForm />
    </AddGeneralModal>
  )
}

As you can see my attempt is to generalize the Dialog component from Shadcn/ui but I really cannot wrap my head around on how to pass setOpen down to SpecificForm and also make TypeScript happy. Thanks for the help.

12 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 5/29/2023 in #questions

Stuck with a TS error for `Object.keys` 😞

Hello all, got a pretty nasty issue that I need to fix otherwise I will not be able to move on with my application. The issue is as follows. I am getting some data from an API, I build the call with an array of strings, and the API response is formatted as an object where every key contains an object with some other data. Let's say for example:

const fruitsIds = ['apple', 'orange', 'kiwi']

const fruitsAPIResponse = {
  apple: {
    taste: 'good',
    price: 3,
  },
  orange: {
    taste: 'fresh',
    price: 5,
  },
  kiwi: {
    taste: 'meh', // with all respects to whom likes them 
    price: 2,
  },
};

const fruitsIds = ['apple', 'orange', 'kiwi']

const fruitsAPIResponse = {
  apple: {
    taste: 'good',
    price: 3,
  },
  orange: {
    taste: 'fresh',
    price: 5,
  },
  kiwi: {
    taste: 'meh', // with all respects to whom likes them 
    price: 2,
  },
};

And now I want to store this information inside my Prisma database looping at each object:

const prices = Object.keys(data).map((key) => {
  return {
    name: key,
    price: data[key].price,
  };
});

const prices = Object.keys(data).map((key) => {
  return {
    name: key,
    price: data[key].price,
  };
});

The issue is that as soon as I type .price I get Object is possibly: undefined with many other errors. Googled a bit and I found a (great video of Matt Pocock)[https://youtu.be/GW00zebIt0g] that explain exactly this issue and helped me create the following function:

const objectKeys = <Obj extends FruitPricesResponse[]>(
    obj: Obj
): (keyof Obj)[] => {
    return Object.keys(obj) as (keyof Obj)[];
};

const objectKeys = <Obj extends FruitPricesResponse[]>(
    obj: Obj
): (keyof Obj)[] => {
    return Object.keys(obj) as (keyof Obj)[];
};

I've solved many of the issue I faced but not the last one and it makes me impossible to massage the data and prepare it to be stored in the database. Those are my types:

type FruitPricesResponse = {
    [key: string]: {
        taste: string,
        price: number,
    },
};

type FruitPricesResponse = {
    [key: string]: {
        taste: string,
        price: number,
    },
};

I really don't know how to move forward from here, hope someone will be able to help me out.

25 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 5/16/2023 in #questions

Query external API and store in database

5 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 5/3/2023 in #questions

Where to run a kinda `cron` specific for each user?

I have the necessity to run a function each hour, this function will add some data into different database tables so I do not want to rely on a cron because, if the user stops to use the platform, I'll end up just adding trash to the database for no reason. So my idea is to go into the auth.ts and use the session event provided to go and fetch the lastRun column of my user profile. If the difference between now and lastRun is more than 1 hour, I'll call the function that will do all the things that has to do. Do you think it could be a good approach or there are better ideas out there?

19 replies

TTCTheo's Typesafe Cult

•Created by cupofcrypto on 5/1/2023 in #questions

How to fetch based on session? Getting 'session possibly null' with useQuery...

Let's say I am getting the session from the useSession hook and with ReactQuery I am setting the enabled status if the user is authenticated like so:

const { data: userProjects } = api.project.getByUserId.useQuery(
  {
    userId: session.user.id,
  },
  {
    enabled: status === "authenticated",
  }
);

const { data: userProjects } = api.project.getByUserId.useQuery(
  {
    userId: session.user.id,
  },
  {
    enabled: status === "authenticated",
  }
);

If I keep my code like this I get the error mentioned in the title, so how can I tell TypeScript that's safe doing so because we will run the query only if the user is authenticated? Instead, if I change it to session?.user.id I get the "Overload matches error" ending with Type 'undefined' is not assignable to type 'string'. Does anyone have an advice?

17 replies

Gaming

Programming