.ketchikan Posts - Answer Overflow

.ketchikan

•Created by .ketchikan on 6/6/2023 in #questions

React Hook Form Type Instantiation is Excessively Deep and Possibly Infinite

Hey! I'm using React Hook Form, Zod, and tRPC in a T3 stack project, and I keep getting an error on the {...register("name_here")}, here's an example of what one of the code blocks looks like with this error:

const ToggleActive = (props: { id: string; activeFlag: boolean }) => {
  const ctx = api.useContext();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting: isPosting },
  } = useForm<formDataType>({
    resolver: zodResolver(Flag),
  });

  const { mutate } = api.users.toggleActive.useMutation({
    onSuccess: async () => {
      await ctx.users.getById.invalidate();
    },
    onError: (e) => {
      const errorMessage = e.data?.zodError?.fieldErrors;
      if (errorMessage && errorMessage[0]) {
        //TODO: Find a better way to get the error messages, consider using the toast
        console.log(errorMessage);
      }
    },
  });

  const onSubmit: SubmitHandler<formDataType> = () => {
    //* Flip the boolean
    const flippedFlag = !props.activeFlag;

    mutate({ id: props.id, activeFlag: flippedFlag });
  };

  return (
    <form className="py-4" onSubmit={onPromise(handleSubmit(onSubmit))}>
      <button
        value={String(props.activeFlag)}
        className="w-full rounded border border-black bg-blue-200"
        type="submit"
        disabled={isPosting}
        {...register("activeFlag")}
      >
        {props.activeFlag !== true && "Reactivate "}
        {props.activeFlag === true && "Deactivate "}
      </button>
      <span>{errors.activeFlag?.message}</span>
    </form>
  );
};

const ToggleActive = (props: { id: string; activeFlag: boolean }) => {
  const ctx = api.useContext();

  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting: isPosting },
  } = useForm<formDataType>({
    resolver: zodResolver(Flag),
  });

  const { mutate } = api.users.toggleActive.useMutation({
    onSuccess: async () => {
      await ctx.users.getById.invalidate();
    },
    onError: (e) => {
      const errorMessage = e.data?.zodError?.fieldErrors;
      if (errorMessage && errorMessage[0]) {
        //TODO: Find a better way to get the error messages, consider using the toast
        console.log(errorMessage);
      }
    },
  });

  const onSubmit: SubmitHandler<formDataType> = () => {
    //* Flip the boolean
    const flippedFlag = !props.activeFlag;

    mutate({ id: props.id, activeFlag: flippedFlag });
  };

  return (
    <form className="py-4" onSubmit={onPromise(handleSubmit(onSubmit))}>
      <button
        value={String(props.activeFlag)}
        className="w-full rounded border border-black bg-blue-200"
        type="submit"
        disabled={isPosting}
        {...register("activeFlag")}
      >
        {props.activeFlag !== true && "Reactivate "}
        {props.activeFlag === true && "Deactivate "}
      </button>
      <span>{errors.activeFlag?.message}</span>
    </form>
  );
};

the formDataType is a prisma object, it's Prisma.UserCreateInput, which is just my user schema in my schema.prisma file. I appreciate any help I can get with this!

2 replies

TTCTheo's Typesafe Cult

•Created by .ketchikan on 5/3/2023 in #questions

Prisma Create with Connect Issue

Hey! I wasn't able to find another thread explaining this, but I'd love help with this! I have two tables in my database right now, they are Org and OrgType (in Prisma). Here is how they look right now:

model Org {
  id             String  @id @default(cuid())
  albatrossOrgId Int     @map("albatross_org_id") //albatross org id
  name           String
  nickname       String?
  parentOrgId    String? @map("parent_org_id")
  orgType        OrgType @relation(references: [id], fields: [orgTypeId])
  orgTypeId      String  @map("org_type_id") //scalar fields above

  // Data Upkeep
  createdBy    String?   @map("created_by")
  modifiedBy   String?   @map("modified_by")
  createdDate  DateTime  @default(now()) @map("created_date")
  modifiedDate DateTime? @updatedAt @map("modified_date")
  activeFlag   Boolean   @default(true) @map("active_flag")
  archiveFlag  Boolean   @default(false) @map("archive_flag")

  // Relational Fields

  // Relational Indexes
  @@index([orgTypeId])
  // Naming
  @@map("org")
}

model OrgType {
  id           String  @id @default(cuid())
  name         String
  parentTypeId String? @map("parent_type_id")

  // Data Upkeep
  createdBy    String?   @map("created_by")
  modifiedBy   String?   @map("modified_by")
  createdDate  DateTime  @default(now()) @map("created_date")
  modifiedDate DateTime? @updatedAt @map("modified_date")
  activeFlag   Boolean   @default(true) @map("active_flag")
  archiveFlag  Boolean   @default(false) @map("archive_flag")

  // Relational Fields
  Org Org[]

  // Relational Indexes

  // Naming
  @@map("org_type")
}

model Org {
  id             String  @id @default(cuid())
  albatrossOrgId Int     @map("albatross_org_id") //albatross org id
  name           String
  nickname       String?
  parentOrgId    String? @map("parent_org_id")
  orgType        OrgType @relation(references: [id], fields: [orgTypeId])
  orgTypeId      String  @map("org_type_id") //scalar fields above

  // Data Upkeep
  createdBy    String?   @map("created_by")
  modifiedBy   String?   @map("modified_by")
  createdDate  DateTime  @default(now()) @map("created_date")
  modifiedDate DateTime? @updatedAt @map("modified_date")
  activeFlag   Boolean   @default(true) @map("active_flag")
  archiveFlag  Boolean   @default(false) @map("archive_flag")

  // Relational Fields

  // Relational Indexes
  @@index([orgTypeId])
  // Naming
  @@map("org")
}

model OrgType {
  id           String  @id @default(cuid())
  name         String
  parentTypeId String? @map("parent_type_id")

  // Data Upkeep
  createdBy    String?   @map("created_by")
  modifiedBy   String?   @map("modified_by")
  createdDate  DateTime  @default(now()) @map("created_date")
  modifiedDate DateTime? @updatedAt @map("modified_date")
  activeFlag   Boolean   @default(true) @map("active_flag")
  archiveFlag  Boolean   @default(false) @map("archive_flag")

  // Relational Fields
  Org Org[]

  // Relational Indexes

  // Naming
  @@map("org_type")
}

I'm using the T3 stack going off the Chirp tutorial video (I'm a noob at js), and I'm trying to insert into the Org table, which has the orgTypeId that I need to insert (this is selected via a dropdown on the client side). Any help would be greatly appreciated!

2 replies

TTCTheo's Typesafe Cult

•Created by .ketchikan on 4/12/2023 in #questions

Zod optional fields and numbers

I'm following along with the T3 app video made a few weeks ago (the twitter clone one), but adjusting it for an app I'm making. I'm currently creating a page that sets up Organizations (teams), but I can't figure out how to resolve this issue (I've watched a handful of Zod, tRPC, and Typescript videos and read through some other threads to try and find an answer, but I haven't found anything to solve this yet). Here is my current schema:

orgId: z.number().min(1).max(191),
  name: z.string().min(1).max(191),
  nickname: z.string().min(1).max(191).optional(),
  parentOrgId: z.number().min(1).max(191).optional()

orgId: z.number().min(1).max(191),
  name: z.string().min(1).max(191),
  nickname: z.string().min(1).max(191).optional(),
  parentOrgId: z.number().min(1).max(191).optional()

But I was getting an error, and learned that inputs can only by strings, so I tried converting the orgId with parseInt, but that doesn't work for the parentOrgId field if I leave it blank (since it returns NaN instead of undefined), and if I leave nickname blank it also returns an error because it's just a blank string and not undefined (I think in Zod it has to either match the content needed or be undefined as part of the optional argument). Sorry if I'm not making sense, I'm happy to share more of my code if needed, but I'd really appreciate help figuring this out!

8 replies

Gaming

Programming