"Expected string, received object" Typescript

Question

I'm creating a Help desk App, with Typescript, next, prisma, tailwind, and MySQL right now I'm dealing with the API call to save a ticket.

I received the following error:
"Expected string, received object" with a 400 bad request.

This is the code:

async function onSubmit(values: z.infer<typeof ticketSchema>) {
     try {
      setIsSubmitting(true);
      setError("");

      const distributor = {
        id: parseInt(values.distributor),
      };

      await axios.post("/api/tickets", {
        ...values,
        distributor: distributor,
        assignee: "",
      });
      router.push("/tickets");
      router.refresh();
    } catch (error) {
      setError("Uknown error ocurred");
    } finally {
      setIsSubmitting(false);
    }
  }

<Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-8 w-full"
        >
          <div className="flex justify-between space-x-4">
            <FormField
              control={form.control}
              name="distributor"
              render={({ field }) => (
                <FormItem>
                  <FormLabel> Distributor ID: </FormLabel>
                  <FormControl>
                    <Input
                      placeholder="Distributor ID..."
                      {...field}
                      className=""
                    />
                  </FormControl>
                </FormItem>
              )}
            />
          <Controller
            name="description"
            control={form.control}
            render={({ field }) => (
              <SimpleMDE placeholder="Description" {...field} />
            )}
          />

          <Button type="submit" disabled={isSubmitting}>
            Create new ticket
          </Button>
        </form>
      </Form>

export const ticketSchema = z.object({
    distributor: z.string().min(1, "DIB-ID is requiered").max(8),
    phone: z.string().min(1, "Phone is requiered").max(10),
    email: z.string().min(1, "Email is requiered").max(100),
    source: z.string().min(1, "source is required").max(15),
    department: z.string().min(1, "department is required").max(30),
    topic: z.string().min(1, "topic is required").max(60),
    description: z.string().min(1, "description is required").max(65000),
    status: z.string().min(1, "Estatus").max(10).optional(),
    priority: z.string().min(1, "Priority").max(10).optional(),

})

when I check the type of what im sending it is a string but the error keep appearing.

console.log(typeof values.distributor) -> String

Do you guys have an advice? I have been stuck in here for 3 days lol.

I will appreciate any comment or advice!

tried to check what type I'm sending

Answer 1

You have a mistake in your code when you are trying to make the post request. Your schema expects you to have a distributor in your object that is a string. but when you are trying to send the post request, you are trying to send an object that contains an integer id:

const distributor = {
   id: parseInt(values.distributor),
};

await axios.post("/api/tickets", {
    ...values,
    distributor: distributor, // this is an object but must be a string
    assignee: "",
});

the solution is easy. you have 2 options.

1. fix it from the request body:

// const distributor = {
//    id: parseInt(values.distributor),
// };

await axios.post("/api/tickets", {
    ...values,
    distributor: values.distributor, // change it to the main value
    assignee: "",
});

2. or update your schema:

export const ticketSchema = z.object({
    distributor: z.object({
        id: z.number().min(1).max(99999999)
    }),
    phone: z.string().min(1, "Phone is requiered").max(10),
    email: z.string().min(1, "Email is requiered").max(100),
    source: z.string().min(1, "source is required").max(15),
    department: z.string().min(1, "department is required").max(30),
    topic: z.string().min(1, "topic is required").max(60),
    description: z.string().min(1, "description is required").max(65000),
    status: z.string().min(1, "Estatus").max(10).optional(),
    priority: z.string().min(1, "Priority").max(10).optional(),
})