Documentation

Query and filters

Attach filter-query schemas to routes and consume typed URL state.

The router integrates with @plumile/filter-query so a route can own a query schema and expose strongly typed filters.

import { defineSchema, numberField, stringField } from '@plumile/filter-query';
import { r, useFilters, useNavigate } from '@plumile/router';

export const productFilters = defineSchema({
  page: numberField(),
  title: stringField(['contains']),
});

export const routes = [
  r({
    path: '/products',
    querySchema: productFilters,
    prepare: ({ filters }) => ({ page: filters.page?.eq ?? 1 }),
    render: () => null,
  }),
];

function ProductsList() {
  const [filters, { set, clear }] = useFilters(productFilters);
  const navigate = useNavigate();
  const page = filters.page?.eq ?? 1;

  return null;
}

The schema is the contract. Use it to normalize defaults, inspect diagnostics, and serialize links consistently.