Using Zod with LHS brackets (validating query strings)

[vresetnikov]

Hello,

consider the following schema, in particular the shipmentDate field:

export const getShipmentsSchema = object({
    query: object({
        previous: string(),
        next: string(),
        shipmentDate: string()
            .refine((date) => spacetime(date).isValid(),
                {message:"Invalid date supplied"}).transform(date => new Date(spacetime(date, 'UTC').epoch))
})})

After having read about REST API filtering/ sorting I have found a specific library, namely QS, that takes in a query string and performs the following:

qs.parse('shipmentDate[gte]=2022-11-02&shipmentDate[lte]=2022-11-20';

This automagically produces the following:

{ shipmentDate: { gte: '2022-11-02', lte: '2022-11-20' } }

Which would be truly amazing if I could make this work with Zod, as it would give the shipmentDate the filtering power without having to add more fields, would benefit from Zod's validation and would be ready to go directly as a DB request.

Is there any way to make this work with the Zod schema provided above?

Ideally, a field would be:

1. parsed as a query string with LHS brackets by qs
2. having dropped the brackets and being parsed by QS, would gain the shape of a Zod schema and would go through validation.
   (I am not sure if this is the correct sequence, maybe you have better/ more optimized ideas?)

I was considering maybe .preprocess(), but no idea how to incorporate that in the provided schema.

Could you kindly provide any ideas/ examples, please?

Thank you!

[nullndr]

A solution could be the following:

const schema = z.string().transform((val) => {
  const args = val.split("&");

  if (args.length === 0) {
    return null;
  }

  const map: Record<string, any> = {};
  const s = z.object({
    shipmentDate: z.object({
      gte: z.string(),
      lte: z.string(),
    }),
  });

  for (const arg of args) {
    const [name, value] = arg.split("=");
    if (name.match(/[a-zA-Z]*\[[a-zA-Z]*\]/)) {
      let [lonelyName, x] = name.split("[");
      x = x.split("]")[0];

      if (lonelyName in map) {
        map[lonelyName][x] = value;
      } else {
        map[lonelyName] = {
          [x]: value,
        };
      }
    } else {
      return null;
    }
  }

  return s.parse(map);
});

/** data is of type 
* 
* {
*   shipmentDate: {
*     gte: string;
*     lte: string;
*   };
* } | null
* 
*/
const data = schema.parse(
  "shipmentDate[gte]=2022-11-02&shipmentDate[lte]=2022-11-20",
); 

But this is not versatile, because you have to define the schema inside the .transform and you can't use the same method with different fields.

You could also add a .superRefine() before the .transform() to check for the regex and the length in order to delete the null value.

[vresetnikov]

I see, thank you, it is very interesting to see .transform() used in such a way. I was doing some investigation and was thinking perhaps moving the whole thing before the Zod validation, in a separate middleware. But then I encounter another problem. When using LHS brackets, a shipment date can take 2 possible shapes -

1. an unnested object - no LHS brackets are provided and thus the value is absolute, e.g.

shipmentDate=2012

Object {shipmentDate: "2012"}

2. a nested object - one or more LHS brackets are provided, e.g. :

shipmentDate[gte]=2012&shipmentDate[lte]=2022

Object {shipmentDate: Object {gte: "2012", lte: "2022"}}

In other words, same field can have many shapes. Can Zod handle this?

[nullndr]

Well, yes but It will result in an union of course.

In my example you could check for args.length === 1.

If it is true, you could parse an object in the form:

const s = z.object({
  shipmentDate: z.string();
})

And return the parsed data.

As I said, this will obviously result in an union:

const data: {
  shipmentDate: {
    gte: string;
    lte: string;
  };
} | {
  shipmenDate: string;
} = schema.parse("shipmentDate=2022-11-02")

You will have then to discriminate the union

[vresetnikov]

Thank you very much for sharing your expertise!