Theo's Typesafe Cult•3y ago

zod with post mutation stucks on a field

Hi, I finished building my form for now and on submit I can log all data properly. Now I tried to add a post mutation, so basically after clicking on submitting a post request shall be send which creates something. I also added zod for validation. Right now if I click on submit the page scroll to a specific field in this case the date input field without any error, not sure what I am missing here in my validation. This is my setup

const createInvoiceSchema = object({
  address_supplement: string().nullish(),
  attachment: string().nullish(), // todo
  city: string().min(1, "City is required"),
  client: string().min(1, "Client is required"),
  country: string().min(1, "Country is required"),
  customer_number: string().min(1, "Customer number is required"),
  date: date(),
  delivary_date: date(),
  introductory_text: string().nullish(),
});


type CreateInvoiceInput = TypeOf<typeof createInvoiceSchema>;

export default function InvoiceCreate() {
  const {
    isLoading,
    error,
    mutate: createInvoice,
  } = trpc.useMutation(["invoice.create"], {
    onSuccess(data) {
      console.log("success", data);
    },
    onError(error) {
      console.log("error", error);
    },
  });

  const methods = useForm<CreateInvoiceInput>({
    defaultValues: {
      country,
    },
    resolver: zodResolver(createInvoiceSchema),
  });

  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = methods;

  const onSubmit: SubmitHandler<CreateInvoiceInput> = async (data) => {
    console.log("data", data);
    createInvoice(data);
  };

  return (
    <MainContainer title="Create a new invoice">
      <Container>
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onSubmit)}>


    ...

    {error && (
       <Alert
         title="Something went wrong!"
         description={error.message}
       >
     )}

const createInvoiceSchema = object({
  address_supplement: string().nullish(),
  attachment: string().nullish(), // todo
  city: string().min(1, "City is required"),
  client: string().min(1, "Client is required"),
  country: string().min(1, "Country is required"),
  customer_number: string().min(1, "Customer number is required"),
  date: date(),
  delivary_date: date(),
  introductory_text: string().nullish(),
});


type CreateInvoiceInput = TypeOf<typeof createInvoiceSchema>;

export default function InvoiceCreate() {
  const {
    isLoading,
    error,
    mutate: createInvoice,
  } = trpc.useMutation(["invoice.create"], {
    onSuccess(data) {
      console.log("success", data);
    },
    onError(error) {
      console.log("error", error);
    },
  });

  const methods = useForm<CreateInvoiceInput>({
    defaultValues: {
      country,
    },
    resolver: zodResolver(createInvoiceSchema),
  });

  const {
    register,
    control,
    handleSubmit,
    formState: { errors },
  } = methods;

  const onSubmit: SubmitHandler<CreateInvoiceInput> = async (data) => {
    console.log("data", data);
    createInvoice(data);
  };

  return (
    <MainContainer title="Create a new invoice">
      <Container>
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onSubmit)}>


    ...

    {error && (
       <Alert
         title="Something went wrong!"
         description={error.message}
       >
     )}

3 Replies

utdev•3y ago

I guess if it automatically scrolls to a field clicking on submit the field has validation errors? But how can I log those specific validation errors, there are currently no logs in the dev console after submitting Even if I set these fields to nullish the page still focuses on the date element on submit

  date: date().nullish(),
  delivary_date: date().nullish(),

  date: date().nullish(),
  delivary_date: date().nullish(),

Unknown User•3y ago

Message Not Public

utdev•3y ago

ok thanks for the info going to check that out hmm errors does not return anything even if I change the type from date() to string() I get the same behavior settings it to string works I think but need to find a better solution maybe transforming the string to a date before, but thanks for the help

Gaming

Programming

zod with post mutation stucks on a field