GraphQL

GraphQL Backend Service to get data from a backend server with the help of GraphQL.

Implementation

To connect a backend service into Angular-Slickgrid, you simply need to modify your gridOptions and add a declaration of onBackendEventChanged. See below for the signature and an example further down below.

TypeScript Signature

onBackendEventApi: {
  onInit?: (query: string) => Promise<any> | Observable<any>;
  preProcess?: () => void;
  process: (query: string) => Promise<any> | Observable<any>;
  postProcess: (response: any) => void;
  service: BackendService;
  filterTypingDebounce?: number;
}

As you can see, you mainly need to define which service to use (GridODataService or GraphQLService) and finally add the process and postProcess callback.

Grid Options example

Note: Pagination is optional and if not defined, it will use what is set in the Angular-Slickgrid - Global Options

this.gridOptions = {
  enableFiltering: true,
  enablePagination: true,
  pagination: {
    pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
    pageSize: defaultPageSize,
    totalItems: 0
  },
  onBackendEventApi: {
    onInit: (query) => this.getCustomerApiCall(query),
    preProcess: () => this.displaySpinner(true),
    process: (query) => this.getCustomerApiCall(query),
    postProcess: (response) => {
      this.displaySpinner(false);
      this.getCustomerCallback(response);
    },
    filterTypingDebounce: 700,
    service: this.graphqlService
  }
};

// Web API call
getCustomerApiCall(graphqlQuery) {
  return this.http.post(`/graphql`, { query: graphqlQuery }).toPromise();
}

GraphQL Server Definition

For the implementation of all 3 actions (filtering, sorting, pagination) with your GraphQL Server, please refer to the sections below to configure your GraphQL Schema accordingly.

• Pagination
• Sorting
• Filtering