Jean Comments - Answer Overflow

Jean

Posts Comments

TTCTheo's Typesafe Cult

•Created by Karlos on 6/18/2024 in #questions

Best headless CMS for t3-stack?

Awesome! I didn't know that.

8 replies

TTCTheo's Typesafe Cult

•Created by Karlos on 6/18/2024 in #questions

Best headless CMS for t3-stack?

I've recently heard good things about Payload CMS (https://payloadcms.com/). It's open-source, can generate TypeScript types, and can even be configured using TypeScript (e.g., the schema).

8 replies

TTCTheo's Typesafe Cult

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

How to build Drizzle explicit types

Instead of drizzle-zod, you can also use the built-in type API in drizzle-orm: https://orm.drizzle.team/docs/goodies

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

export type RolesInsert = roles.$inferInsert;
export type RolesSelect = roles.$inferSelect;

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

export type RolesInsert = roles.$inferInsert;
export type RolesSelect = roles.$inferSelect;

Then explicitly define the return type with the RolesSelect type:

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

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

When you pass the result to a prop, check for undefined. Either handle it in the parent component before you pass the prop or within your component. You can then type the prop using the RolesSelect type as well.

import type { RolesSelect } from "...";

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

import type { RolesSelect } from "...";

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

or:

import type { RolesSelect } from "...";

export default function DisplayRole({ role }: { role: RolesSelect | undefined }) { 
    if (!role) {
        // Something to show when the role doesn't exist.
    }
    // Your component code...
}

import type { RolesSelect } from "...";

export default function DisplayRole({ role }: { role: RolesSelect | undefined }) { 
    if (!role) {
        // Something to show when the role doesn't exist.
    }
    // Your component code...
}

Let me know if this helps!

4 replies

Gaming

Programming