Skip to content

custom-backend-service.md

Latest commit

 

History

History
115 lines (94 loc) · 6.1 KB

custom-backend-service.md

File metadata and controls

115 lines (94 loc) · 6.1 KB
Raw

Intro

The lib currently supports OData and GraphQL with built-in Services, if you want to use and create a different and Custom Backend Service, then follow the steps below.

Instructions

To create your own Custom Backend Service, I suggest you take the code of the GraphqlService and then rewrite the internal of each methods. The thing to remember is that you have to implement the BackendService as defined in the GraphqlService (export class GraphqlService implements BackendService).

You typically want to implement your service following these TypeScript interfaces

At the end of it, you'll have a Custom Backend Service that will be instantiated just like the GraphQL or OData that I've created, it should look similar to this (also note, try to avoid passing anything in the constructor of your Service to keep it usable by everyone)

class MyComponent {
  gridInit() {
    this.gridOptions = {
      backendServiceApi: {
        service: new YourCustomBackendService(),
        options: {
          // custom service options that extends "backendServiceOption" interface
        },
        preProcess: () => !this.isDataLoaded ? this.displaySpinner(true) : '',
        process: (query, options) => this.getCountries(query, options),
        postProcess: (result) => {
          this.displaySpinner(false);
          this.isDataLoaded = true;
        }
      } as YourCustomBackendServiceApi
    };
  }

  // Note: The second parameter contains the AbortSignal for Promise-based request cancellation.
  // Since Angular HttpClient returns RxJS Observables, it uses its own cancellation mechanism.
  // If you want to use AbortSignal, use the Fetch API instead.
  getCountries(query: string, options?: { signal?: AbortSignal }) {
    // Using Angular HttpClient (RxJS Observable - has built-in cancellation)
    return this.http.get(`/api/countries?${query}`, {
      reportProgress: true
    });

    // Alternative: Use Fetch API for AbortSignal support
    // return fetch(`/api/countries?${query}`, {
    //   signal: options?.signal
    // }).then(response => response.json());
  }
}

If you need to reference your Service for other purposes then you better instantiated in a separate variable and then just pass it to the service property of the backendServiceApi.

class MyComponent {
  myCustomService = new YourCustomBackendService();

  gridInit {
    this.gridOptions = {
        backendServiceApi: {
          service: this.myCustomService,
          // ...
        } as YourCustomBackendServiceApi
    };
  }
}

If your Service is for a well known DB or API framework, then it might be possible to add your Service to the lib itself, however it should be added to the new monorepo lib Slickgrid-Universal in the list of slickgrid-universal/packages. Since that is a monorepo lib, users will have the ability to use and download only the package they need.

Request Cancellation with AbortSignal

SlickGrid automatically supports request cancellation for Promise-based backend services using the standard AbortSignal API. This feature prevents stale results from being processed when users rapidly trigger new filter or sort operations.

Why Cancellation is Important

Without cancellation, if a user is typing a filter (e.g., "Jo", then "Joe", then "John"), each letter triggers a backend request. If the requests complete out of order, the result from the "Jo" query might arrive AFTER the "John" query result, overwriting the correct data with outdated results.

How It Works

  1. Automatic: SlickGrid manages the AbortController internally - you don't need to create one
  2. Transparent: The AbortSignal is automatically passed to your process method
  3. Smart: Only the most recent request result is processed; cancelled requests are silently ignored

Implementation

All you need to do is accept the optional second parameter in your process method and, if you want to support automatic request cancellation, pass the signal to your fetch/HTTP call:

process: (query: string, options?: { signal?: AbortSignal }) => Promise<any>

Example with Angular HttpClient (RxJS Observable)

getCountries(query: string, options?: { signal?: AbortSignal }) {
  // Angular HttpClient returns Observables (not Promises), so it has its own cancellation mechanism
  // through RxJS unsubscribe. The AbortSignal parameter is not used here.
  return this.http.get(`/api/countries?q=${query}`, {
    reportProgress: true
  });
}

Example with Fetch API (Promise-based)

getCountries(query: string, options?: { signal?: AbortSignal }) {
  return fetch(`/api/countries?q=${query}`, {
    signal: options?.signal  // This automatically aborts when a new request comes in
  }).then(r => r.json());
}

Important Notes

  • The AbortSignal parameter is optional - existing implementations without it will continue to work
  • AbortError handling: When a request is cancelled, it throws an error with name: 'AbortError'. SlickGrid handles these automatically
  • Real errors: Non-AbortError exceptions are still passed to your error callbacks
  • Backwards compatible: Older implementations that don't use the signal parameter will work as before
  • RxJS/Observable Note: If you're using Angular HttpClient (which returns Observables), AbortSignal doesn't apply since Observables have their own cancellation mechanism through unsubscribe. If you need AbortSignal support, use the Fetch API instead