Skip to content

Query Builder

  • import: @azure-net/kit/infra
  • Preferred location: src/app/core/query-builders

URL parameter builder with support for various serialization formats.

Basic usage

typescript
import { QueryBuilder } from '@azure-net/kit/infra';

// All parameters configurable when creating the class can be overridden for each individual build method call
const queryBuilder = new QueryBuilder({
  arrayFormat: 'brackets', // 'repeat' | 'brackets' | 'comma' | 'json'
  objectFormat: 'default'  // 'default' | 'nested-brackets'
});

// Simple parameters
const query1 = queryBuilder.build({
  page: 1,
  limit: 10,
  search: 'john'
});
// ?page=1&limit=10&search=john

// Arrays
const query2 = queryBuilder.build({
  tags: ['javascript', 'svelte', 'typescript']
}, { arrayFormat: 'brackets' });
// ?tags[]=javascript&tags[]=svelte&tags[]=typescript

const query3 = queryBuilder.build({
  ids: [1, 2, 3]
}, { arrayFormat: 'comma' });
// ?ids=1,2,3

// Objects
const query4 = queryBuilder.build({
  filter: {
    status: 'active',
    role: 'admin'
  }
}, { objectFormat: 'nested-brackets' });
// ?filter[status]=active&filter[role]=admin

Custom QueryBuilder

typescript
class ApiQueryBuilder extends QueryBuilder {
  transform(query: object): object {
    // Custom parameter transformation
    const transformed = { ...query };
    
    // Convert null to empty string
    for (const [key, value] of Object.entries(transformed)) {
      if (value === null) {
        transformed[key] = '';
      }
    }
    
    return transformed;
  }
}

const customBuilder = new ApiQueryBuilder();

Build method options

  • delimiter - Whether to add question mark at the beginning of string. Default: true.
  • arrayFormat - array formatting: 'repeat' | 'brackets' | 'comma' | 'json'. Default: 'repeat', can be globally set in constructor.
  • objectFormat - object formatting: 'default' | 'nested-brackets'. Default: 'default', can be globally set in constructor. With 'default' it will try to simply convert the object to a string. An example with nested-brackets is shown above.