moderate-tomato

Resources on API data typing, read vs update vs create ?

TLDR: Seeking best practices for handling API data validation and form validation in a React app with Typescript.

Full question:
We're using React, Typescript, TanStack Query, zod, react-hook-form, etc. The back-end is python, fully separate, cannot use the same typings files.

This is a types question, pertaining to API endpoints.

We don't want to trigger a

zod

zod

error if a string is too long from the server, but do want to enforce string length on a form field and any code that does an useMutation. So we have multiple related types for the various things you do with the data. Which leads to type code like this:

const FooCommonSchema = z.object({
  title: z.string(),
  budget: z.number(),
});

const ReadFooSchema = FooCommonSchema.extend({
  uuid: z.string(),
});

const UpdateFooSchema = FooCommonSchema.extend({
  title: z
    .string()
    .min(1, {
      message: "Title not be blank",
    })
    .max(255, {
      message: "Title so dang long",
    }),
  budget: z.number().int().min(1, {
    message: "Real money only",
  }),
  uuid: z.string(),
});

const FooCommonSchema = z.object({
  title: z.string(),
  budget: z.number(),
});

const ReadFooSchema = FooCommonSchema.extend({
  uuid: z.string(),
});

const UpdateFooSchema = FooCommonSchema.extend({
  title: z
    .string()
    .min(1, {
      message: "Title not be blank",
    })
    .max(255, {
      message: "Title so dang long",
    }),
  budget: z.number().int().min(1, {
    message: "Real money only",
  }),
  uuid: z.string(),
});

Looking for best practices in such matters. Our types are getting quite complex and we're looking for ways to simplify. Yes, the above is a simplified example, but we have a lot of repeated code like this.

TanStack•2y ago

moderate-tomato

Resources on API data typing, read vs update vs create ?

zod

zod

const FooCommonSchema = z.object({
  title: z.string(),
  budget: z.number(),
});

const ReadFooSchema = FooCommonSchema.extend({
  uuid: z.string(),
});

const UpdateFooSchema = FooCommonSchema.extend({
  title: z
    .string()
    .min(1, {
      message: "Title not be blank",
    })
    .max(255, {
      message: "Title so dang long",
    }),
  budget: z.number().int().min(1, {
    message: "Real money only",
  }),
  uuid: z.string(),
});

const FooCommonSchema = z.object({
  title: z.string(),
  budget: z.number(),
});

const ReadFooSchema = FooCommonSchema.extend({
  uuid: z.string(),
});

const UpdateFooSchema = FooCommonSchema.extend({
  title: z
    .string()
    .min(1, {
      message: "Title not be blank",
    })
    .max(255, {
      message: "Title so dang long",
    }),
  budget: z.number().int().min(1, {
    message: "Real money only",
  }),
  uuid: z.string(),
});

Resources on API data typing, read vs update vs create ?

Similar Threads

Resources on API data typing, read vs update vs create ?

Similar Threads

Similar Threads

Similar Threads