Frontend Implementation

Ready-to-use code examples and utilities for integrating search functionality into your frontend applications.

Quick Navigation

• Query Builder - JavaScript utility for building search URLs

• React Hook Example - Complete React implementation

JavaScript Query Builder

Here's the essential utility function your frontend team needs:

const buildQuery = (filters, pagination, sorting) => {
  const params = new URLSearchParams();
  
  // Add filters
  Object.entries(filters).forEach(([field, config]) => {
    const { operation = 'eq', value } = config;
    const key = operation === 'eq' ? field : `${field}__${operation}`;
    params.append(key, value);
  });
  
  // Add pagination
  params.append('page', pagination.page);
  params.append('size', pagination.size);
  
  // Add sorting
  params.append('sort', sorting.field);
  params.append('order', sorting.direction);
  
  return params.toString();
};

Usage Example

const query = buildQuery(
  {
    name: { operation: 'like', value: 'john' },
    balance: { operation: 'ge', value: 1000 },
    status: { operation: 'ne', value: 'inactive' }
  },
  { page: 0, size: 20 },
  { field: 'balance', direction: 'DESC' }
);

// Result: name__like=john&balance__ge=1000&status__ne=inactive&page=0&size=20&sort=balance&order=DESC

Framework Integration

React/Vue/Angular

The query builder works with any framework. Just adapt the state management to your framework's patterns.

TypeScript Support

Add type definitions for better development experience and type safety.

Check the detailed implementation guides in the subsections!