Vimes Posts - Answer Overflow

Vimes

•Created by Vimes on 3/15/2023 in #questions

Zod with types from Supabase type gen

Trying to use types from supabase typegen with Zod, but I can't figure out how. They supabase docs use this weird syntax for getting the data. My current attempt

type TaaS = Database['public']['Tables']['taas']['Row']

const Props = z.object({
  user: User,
  profile: Profile,
  audits: Audit,
  taas: z.array(TaaS), <- This fails
});

type TaaS = Database['public']['Tables']['taas']['Row']

const Props = z.object({
  user: User,
  profile: Profile,
  audits: Audit,
  taas: z.array(TaaS), <- This fails
});

Any ideas on how I can fix this 🤔

3 replies

TTCTheo's Typesafe Cult

•Created by Vimes on 2/23/2023 in #questions

Recommendations for auth setup

I've been rolling Auth0 with the nextjs library for Auth0. Now I need to do a full re-write of the site and I'm considering other auth options. Allot of auth0's features cost money, the admin UI is terrible and the login screen we get form auth0 could be more sexy Whatever happens I'm shifting to NextAuth, but what providers do you guys prefer? I want email+password login, about 10-20 users a month. O365/Google login would also be nice, but is not necessary. I don't mind self hosting, the most important part is a good DX and ability to store data about users (like what they should have access too) Been looking at self hosted supabase and just "pure" NextAuth with Postgres. People on reddit say Firebase is cool, but I don't know how much I trust google. And if supabase is what people like, next auth with supabase vs supabase SDK? So many choices ):

9 replies

TTCTheo's Typesafe Cult

•Created by Vimes on 2/22/2023 in #questions

Type of return from await

getting a TS error stating "34:9 Error: Unsafe assignment of an any value." on my await in getServerSideProps. Tried to scour the docs for a solution but can't find anywhere where someone sets a type that works for me await. getAudit is a JS function, not TS (yet). Any ideas on how I should best solve this?

export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit= await getAudit(`/granskninger/${params.query.slug}`); //  34:9  Error: Unsafe assignment of an `any` value. + 34:48  Error: Invalid type "string | string[] | undefined" of template literal expression. 
  return {
    props: { audit }
  };
};

export const getServerSideProps: GetServerSideProps = async (params) => {
  const audit= await getAudit(`/granskninger/${params.query.slug}`); //  34:9  Error: Unsafe assignment of an `any` value. + 34:48  Error: Invalid type "string | string[] | undefined" of template literal expression. 
  return {
    props: { audit }
  };
};

I have the "correct" props for my render function in the page

type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};

type Props = {
  audit: {
    content: {
      descendants: {  items: ContentProps[]; };
      id: string;
      level: number;
      name: string;

    };
  };
};

25 replies

TTCTheo's Typesafe Cult

•Created by Vimes on 2/21/2023 in #questions

Types for an object passed as props

I run a map where I loop out content from a CMS

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps; 
    }
  }
}

const AuditRenderer = ({ content }: PureContentProps ) => {
  const allContent = content.descendants?.items.map((allContent) => (
    <AuditConditionalRenderer allContent={allContent} />
  ));

type PureContentProps = {
  content: {
    descendants: {
      items: ContentProps; 
    }
  }
}

const AuditRenderer = ({ content }: PureContentProps ) => {
  const allContent = content.descendants?.items.map((allContent) => (
    <AuditConditionalRenderer allContent={allContent} />
  ));

Then I use this data in my component, it looks like this

type ContentProps = {
    level: number; 
    name: string; 
    beskrivelse: string; 
    vurdering: string; 
    funn: string; 
}
const AuditConditionalRenderer = ({ allContent }: {allContent: ContentProps}) => {

type ContentProps = {
    level: number; 
    name: string; 
    beskrivelse: string; 
    vurdering: string; 
    funn: string; 
}
const AuditConditionalRenderer = ({ allContent }: {allContent: ContentProps}) => {

So I use the data in "items" I get from my CMS. Items are descirbed by ContentProps. How can I tell TS this? Currently getting an error on "allContent" in my map stating "Type 'string' is not assignable to type 'ContentProps'" Do I have to manually pass each value instead of sending everything as an object? Seems a bit cumbersom

2 replies

TTCTheo's Typesafe Cult

•Created by Vimes on 2/21/2023 in #questions

Typescript with array data from shitty CMS

8 replies

TTCTheo's Typesafe Cult

•Created by Vimes on 11/30/2022 in #questions

When to use Zod?

I'v seen the youtube hype for Zod now, but it still unclear to me when I should actually use Zod. Most of the examples I find online use Zod for something like API-data or user input data (like forms). But I use TS for so much more (well try to any way, still learning 😉). Should I just forget that TS exists and use Zod for everything I used to do in TS or should I use TS when not dealing with API-data or user input?

28 replies

Gaming

Programming