ngx-surreal

• Introduction
• Compatibility
• Installation
• Initialization
  • With standalone bootstrap
  • With NgModule bootstrap
• Configuration
• Usage
• Links

Introduction

This package is a simple wrapper around the SurrealDB JavaScript SDK. It exposes almost all of the same methods as the SDK, only converted to RxJS Observables to make it easier to use within a standard Angular application. It also re-exports some classes and types from the SDK. On service initialization, it sets up a single connection with the configuration supplied in the SurrealModule.forRoot() method.

Compatibility

ngx-surreal	Angular	SurrealDB
^0.2.1	>=18.0.0	^1.0.0

Installation

# npm
npm install ngx-surreal

# pnpm
pnpm add ngx-surreal

# yarn
yarn add ngx-surrreal

# bun
bun add ngx-surreal

Initialization

This package exposes a module called SurrealModule with only one method: forRoot(). The forRoot() method takes an object of type SurrealConfig with SurrealDB connection options.

With standalone bootstrap

import { importProvidersFrom, type ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { SurrealModule, type SurrealConfig } from 'ngx-surreal';
import { routes } from './app.routes';

const surrealConfig: SurrealConfig = {
  url: 'http://localhost:8000/rpc',
  namespace: 'test',
  database: 'test'
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    importProvidersFrom(SurrealModule.forRoot(surrealConfig))
  ]
};

With NgModule bootstrap

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SurrealModule, type SurrealConfig } from 'ngx-surreal';
import { AppComponent } from './app.component';

const surrealConfig: SurrealConfig = {
  url: 'http://localhost:8000/rpc',
  namespace: 'test',
  database: 'test'
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SurrealModule.forRoot(surrealConfig)
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Configuration

The type definition for SurrealConfig is as follows:

import type { ConnectionOptions } from 'surrealdb.js';

export type SurrealConfig = ConnectionOptions & { url: string };

See for all connection options the definition for the ConnectionOptions type.

Usage

import { Component, signal, type OnInit } from '@angular/core';
import { SurrealService, RecordId, PreparedQuery } from 'ngx-surreal';

@Component({
  selector: 'app-example',
  templateUrl: 'example.component.html',
  styleUrl: 'example.component.scss'
})
export class ExampleComponent implements OnInit {
  public readonly items = signal([]);
  public readonly singleItem = signal({});

  private readonly surrealService = inject(SurrealService);
  // or
  constructor(private readonly surrealService: SurrealService) {}

  public ngOnInit() {
    console.log(this.surrealService.status());
  }

  public signup(email: string, password: string) {
    this.surrealService.signup({scope: 'user', email, password}).subscribe(console.log);
  }

  public signin(email: string, password: string) {
    this.surrealService.signin({scope: 'user', email, password}).subscribe(console.log);
  }

  public fetchAllItems() {
    this.surrealService.select('example').subscribe(records => this.items.set(records));
  }

  public fetchItem(id: string) {
    const recordId = new RecordId('example', id);
    this.surrealService.select(recordId).subscribe(record => this.singleItem.set(record));
  }

  public updateItem(id: string, updates: Record<string, unknown>) {
    this.surrealService.update(`example:${id}`, updates).subscribe(console.dir);
  }

  public deleteItem(id: string) {
    const recordId = new RecordId('example', id);
    this.surrealService.delete(recordId).subscribe(console.dir);
  }

  public queryAllItems() {
    this.surrealService.query('select * from example; select * from type::table($table)', {table: 'example2'}).subscribe(console.dir);
    // or
    const query = new PreparedQuery('select * from type::table($table)', {table: 'example'});
    this.surrealService.query(query).subscribe(console.dir);
  }
}

See for more examples and all available methods the SurrealDB JavaScript SDK.

Links

• Angular docs
• SurrealDB docs