Key validation in object: RegExp mixed with regular strings

[hmaesta]

Hi there!

I'm validating filters and sub-filters in a URL.

For example:

• Filter: Category
  • Option: Restaurant
    • Sub-filter: Cuisine
      • Option: Chinese
      • Option: Italian
      • Option: Greek
  • Option: Clothing store
    • Sub-filter: Style
    • Option: Modern
    • Option: Classic

These filters live in the URL, like so:

• ?category=restaurant&category_cuisine=italian

I'm trying to use Zod to validate that.

---

This is my main idea:

enum Filters {
  CATEGORY = 'category',
  PRICE = 'price'
}

const allowedFilters = Object.values(Filters).join('|');

// RegExp accepts just the filter key (i.e. `category`)
// or the filter key followed by the sub-filter (i.e. `category_cuisine`)
// (It's not validating the sub-filter to simplify)
const keyPattern = new RegExp(`^(${allowedFilters})(?:_\\w+)?$`, 'u'); 

const FilterSchema = z.record(z.string().regex(keyPattern), z.array(z.string()).or(z.string()));

That works as expected, but I have an issue: some extra query parameters, like page and sort, must be validated.

Creating a union fails because these extra parameters would first fail in the above RegExp.

// Fails
const UrlSchema = z.union([
   FilterSchema, // ← Fails here first, since `page` is invalid for the RegExp
   z.strictObject({ page: z.string().optional(), sort: z.string().optional() })
]);

---

I had two ideas to work around that, but neither one worked.

The first one was to preprocess, isolate the filters, validate, and merge them again:

const UrlSchema = z.preprocess(
  (input) => {
    if (typeof input !== 'object' || input === null) {
      return input;
    }
    const filters = { ...input };

    // Extract `page`
    let page: string | undefined;
    if ('page' in filters && filters.page === 'string') {
      ({ page } = filters);
      delete filters.page;
    }
    // Extract `sort`
    let sort: string | undefined;
    if ('sort' in filters && filters.page === 'string') {
      ({ sort } = filters);
      delete filters.sort;
    }

    return { filters: input, page, sort };
  },
  z
    .strictObject({
      filters: FilterSchema.optional(),
      page: z.string().optional(),
      sort: z.string().optional(),
    })
    .transform((output) => {
      const { filters, ...rest } = output;
      return { ...filters, ...rest };
    })
);

And the second one was to refine in FilterSchema, returning true to the non-filter ones and expecting them to fail in the strictObject validation:

const FilterSchema = z.record(
  z.string().refine((key) => {
    const isFilter = Object.values(Filters).some((thisKey) => key.startsWith(thisKey));

    if (isFilter) { return keyPattern.test(key) }

    return true;
  }),
  valueValidation
);

export const UrlSchema = z.union([
  FiltersSchema,
  z.strictObject({
    page: z.string().optional(),
    sort: z.string().optional(),
  }),
]);

---

Both didn't work, and I'm starting to accept that there's no easy way to do this. I ended up extending the RegExp to include page and sort, but now I want to understand if there's a better way to do this.