Browser extension

Browser Extension

The @uql/core/browser extension allows you to consume UQL REST APIs (generated by the Express Extension) on the frontend with the same type-safe syntax you use on the backend.

Quick Start

Initialize the HttpQuerier:

import { HttpQuerier } from '@uql/core/browser';

// Configure the frontend to point to your backend API
const querier = new HttpQuerier('https://api.yourdomain.com/api');

Query Data: Interact with your entities as if you were on the backend.

import { User } from './shared/models/index.js';

// Deeply type-safe queries in the browser!
const users = await querier.findMany(User, {
  $select: {
    email: true,
    profile: { $select: ['picture'] }
  },
  $where: { email: { $endsWith: '@domain.com' } },
  $sort: { createdAt: 'desc' },
  $limit: 10
});

Shared Entities & Type Safety

One of the biggest advantages of the Browser Extension is the ability to easily share your entity classes between your backend and frontend.

import { Entity, Id, Field } from '@uql/core';

@Entity()
export class User {
  @Id()
  id: string;

  @Field()
  name: string;
}

// frontend/app.ts
import { User } from '../shared/models/User.js';
const users = await querier.findMany(User, {
  $where: { name: { $startsWith: 'A' } }
});
// 'users' is automatically typed as User[]

Authentication & Headers

You can pass standard fetch options (like headers) to any querier method. This is typically used for passing JWT tokens or other authentication credentials.

const users = await querier.findMany(User, {
  $where: { status: 'active' }
}, {
  headers: {
    'Authorization': `Bearer ${session.token}`,
    'X-Custom-Header': 'value'
  }
});