angular-slickgrid 9.0.0 → 9.0.2

package/docs/backend-services/GraphQL.md

@@ -1,276 +0,0 @@
-##### index
-- [Extra Query Arguments](#extra-query-arguments)
-- [Changing/Updating Options Dynamically](#changingupdating-options-dynamically)
-- [GraphQL without Pagination](#graphql-without-pagination)
-- [GraphQL Server Definitions](#graphql-server-definitions)
-  - [Pagination](graphql/GraphQL-Pagination.md)
-  - [Sorting](graphql/GraphQL-Sorting.md)
-  - [Filtering](graphql/GraphQL-Filtering.md)
-- [Infinite Scroll](../grid-functionalities/infinite-scroll.md#infinite-scroll-with-backend-services)
-
-### Description
-GraphQL Backend Service (for Pagination purposes) to get data from a backend server with the help of GraphQL.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/gridgraphql) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-graphql.component.ts)
-
-### Note
-You can use it when you need to support **Pagination** (though you could disable Pagination if you wish), that is when your dataset is rather large and has typically more than 5k rows, with a GraphQL endpoint. If your dataset is small (less than 5k rows), then you might be better off with [regular grid](https://ghiscoding.github.io/Angular-Slickgrid/#/basic) with the "dataset.bind" property. SlickGrid can easily handle million of rows using a DataView object, but personally when the dataset is known to be large, I usually use a backend service (OData or GraphQL) and when it's small I go with a [regular grid](https://ghiscoding.github.io/Angular-Slickgrid/#/basic).
-
-## Implementation
-To connect a backend service into `Slickgrid-Universal`, you simply need to modify your `gridOptions` and add a declaration of `backendServiceApi`. See below for the signature and an example further down below.
-
-### TypeScript Signature
-```ts
-backendServiceApi: {
-  // On init (or on page load), what action to perform?
-  onInit?: (query: string) => Promise<any>;
-
-  // Before executing the query, what action to perform? For example, start a spinner
-  preProcess?: () => void;
-
-  // On Processing, we get the query back from the service, and we need to provide a Promise. For example: this.http.get(myGraphqlUrl)
-  process: (query: string) => Promise<any>;
-
-  // After executing the query, what action to perform? For example, stop the spinner
-  postProcess: (response: any) => void;
-
-  // Backend Service instance (could be OData or GraphQL Service)
-  service: BackendService;
-
-  // Throttle the amount of requests sent to the backend. Default to 500ms
-  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, while all the rest are totally optional.
-
-### Typescript GraphQL Service Options
-You can also pass certain options to the `backendServiceApi` through the `options` property. The list of options is the following
-
-```typescript
-export interface GraphqlServiceOption extends BackendServiceOption {
-  /**
-   * When using Translation, we probably want to add locale in the query for the filterBy/orderBy to work
-   * ex.: users(first: 10, offset: 0, locale: "en-CA", filterBy: [{field: name, operator: EQ, value:"John"}]) {
-   */
-  addLocaleIntoQuery?: boolean;
-
-  /** Array of column ids that are included in the column definitions */
-  columnIds?: string[];
-
-  /** What is the dataset, this is required for the GraphQL query to be built */
-  datasetName?: string;
-
-  /** Used for defining the operation name when building the GraphQL query */
-  operationName?: string;
-
-  /** Use Pagination Cursor in the GraphQL Server. Note: previously named `isWithCursor */
-  useCursor?: boolean;
-
-  /** What are the pagination options? ex.: (first, last, offset) */
-  paginationOptions?: GraphqlPaginationOption | GraphqlCursorPaginationOption;
-
-  /** array of Filtering Options, ex.: { field: name, operator: EQ, value: "John" }  */
-  filteringOptions?: GraphqlFilteringOption[];
-
-  /** array of Filtering Options, ex.: { field: name, direction: DESC }  */
-  sortingOptions?: GraphqlSortingOption[];
-
-  /**
-   * Do we want to keep double quotes on field arguments of filterBy/sortBy (field: "name" instead of field: name)
-   * ex.: { field: "name", operator: EQ, value: "John" }
-   */
-  keepArgumentFieldDoubleQuotes?: boolean;
-
-  /**
-   * When false, searchTerms may be manipulated to be functional with certain filters eg: string only filters.
-   * When true, JSON.stringify is used on the searchTerms and used in the query "as-is". It is then the responsibility of the developer to sanitise the `searchTerms` property if necessary.
-   */
-  useVerbatimSearchTerms?: boolean;
-}
-```
-
-#### Grid Definition & call of `backendServiceApi`
-##### Notes
-- Pagination is optional and if not defined, it will use what is set in the  [Slickgrid-Universal - Global Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/global-grid-options.ts)
-- `onInit` is optional and is there to initialize the grid with data on first page load (typically the same call as `process`)
-  - you could load the grid yourself outside of the `gridOptions` which is why it's optional
-- `filterTypingDebounce` is a timer (in milliseconds) that waits for user input pause before querying the backend server
-  - this is meant to throttle the amount of requests sent to the backend (we don't really want to query every keystroke)
-  - 700ms is the default when not provided
-
-##### Code
-```ts
-import { Component, Injectable, OnInit } from '@angular/core';
-import { Column, GridOption } from 'angular-slickgrid';
-import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-
-@Injectable()
-
-export class MyComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-
-  constructor(private http: HttpClient) { }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      // your column definitions
-    ];
-
-    this.gridOptions = {
-      enableFiltering: true,
-      enablePagination: true,
-      pagination: {
-        pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: defaultPageSize,
-        totalItems: 0
-      },
-      backendServiceApi: {
-        service: new GraphqlService(),
-
-        // add some options to the backend service to work
-        // shown below is the minimum setup for the service to work correctly
-        options: {
-          datasetName: 'users',
-          paginationOptions: {
-            first: 25,
-            offset: 0
-          }
-        },
-
-        // define all the on Event callbacks
-        preProcess: () => this.displaySpinner(true),
-        process: (query) => this.getAllCustomers(query),
-        postProcess: (response) => this.displaySpinner(false)
-      }
-    };
-  }
-
-  // Web API call
-  getAllCustomers(graphqlQuery) {
-    return this.http.post('/api/customers', { query: graphqlQuery });
-  }
-}
-```
-
-### Extra Query Arguments
-You can pass extra query arguments to the GraphQL query via the `extraQueryArguments` property defined in the `backendServiceApi.options`. For example let say you have a list of users and your GraphQL query accepts an optional `userId`, you can write it in code this way:
-```ts
-this.gridOptions = {
-  backendServiceApi: {
-    service: new GraphqlService(),
-
-    // add some options to the backend service to work
-    options: {
-      executeProcessCommandOnInit: false, // true by default, which load the data on page load
-      datasetName: 'users',
-      paginationOptions: {
-        first: 25,
-        offset: 0
-      },
-      extraQueryArguments: [{
-        field: 'userId',
-        value: 567
-      }]
-    },
-
-    // define all the on Event callbacks
-    preProcess: () => this.displaySpinner(true),
-    process: (query) => this.getCustomerApiCall(query),
-    postProcess: (response) => this.displaySpinner(false)
-  }
-};
-```
-
-The GraphQL query built with these options will be
-```ts
-// extraQueryArguments will change the userId with
-{
-  users(first: 20, offset: 0, userId: 567) {
-    totalCount,
-    nodes {
-      id,
-      name,
-      company
-    }
-  }
-}
-```
-
-### Changing/Updating Options Dynamically
-You might want to change certain options dynamically, for example passing new set of values to `extraQueryArguments`. For that you will have to first keep a reference to your `GraphqlService` instance and then you can call the `updateOptions` method.
-
-##### Code Example
-```ts
-export class MyComponent implements OnInit {
-  graphqlService: GraphqlService;
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-
-  constructor() {
-    this.graphqlService = GraphqlService();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      // ...
-    ];
-
-    this.gridOptions = {
-      backendServiceApi: {
-        service: this.graphqlService,
-        // ...
-      }
-    };
-  }
-}
-
-changeQueryArguments() {
-  // update any Backend Service Options you want
-  this.graphqlService.updateOptions({
-    extraQueryArguments: [{
-      field: 'userId',
-      value: 567
-    }]
-  });
-
-  // then make sure to refresh the dataset
-  this.angularGrid.pluginService.refreshBackendDataset();
-}
-```
-
-### GraphQL without Pagination
-By default, the Pagination is enabled and will produce a GraphQL query which includes page related information but you could also use the GraphQL Service without Pagination if you wish by disabling the flag `enablePagination: false` in the Grid Options. However please note that the GraphQL Query will be totally different since it won't include any page related information.
-
-#### Code Example
-```ts
-this.gridOptions = {
-  enablePagination: false,
-  backendServiceApi: {
-    service: this.graphqlService,
-    // ...
-  }
-};
-```
-
-#### Query Change Example
-If we take for example a GrahQL Query that includes Pagination versus without Pagination, you will see a much simpler query string. Also, note that the filtering and sorting won't be affected, they will remain as query input.
-
-##### with Pagination
-1. `query{ users(first:20, offset:40){ totalCount, nodes{ id, field1, field2 }}}`
-2. `query{ users(first:20, offset:40, filterBy: [{ field: field1, value: 'test', operator: StartsWith }]){ totalCount, nodes{ id, field1, field2 }}}`
-
-##### without Pagination
-1. `query{ users{ id, field1, field2 }}`
-2. `query{ users(filterBy: [{ field: field1, value: 'test', operator: StartsWith }]){ id, field1, field2 }}`
-
-## GraphQL Server Definitions
-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](graphql/GraphQL-Pagination.md)
-- [Sorting](graphql/GraphQL-Sorting.md)
-- [Filtering](graphql/GraphQL-Filtering.md)

package/docs/backend-services/OData.md

@@ -1,245 +0,0 @@
-##### index
-- [TypeScript signature](#typescript-signature)
-- [Usage](#grid-definition--call-of-backendserviceapi)
-- [Passing Extra Arguments](#passing-extra-arguments-to-the-query)
-- [OData options](#odata-options)
-- [Override the filter query](#override-the-filter-query)
-- [Infinite Scroll](../grid-functionalities/infinite-scroll.md#infinite-scroll-with-backend-services)
-
-### Description
-OData Backend Service (for Pagination purposes) to get data from a backend server with the help of OData.
-
-### Demo
-[Demo Page](https://ghiscoding.github.io/Angular-Slickgrid/#/odata) / [Demo Component](https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-odata.component.ts)
-
-### Note
-Use it when you need to support **Pagination** (that is when your dataset is rather large, more than 5k rows) with a OData endpoint. If your dataset is small (less than 5k rows), then go with a [regular grid](https://ghiscoding.github.io/Angular-Slickgrid/#/basic) with the `[dataset]` binding property. SlickGrid can easily handle million of rows using a DataView object, but personally when the dataset is known to be large, I usually use a backend service (OData or GraphQL) and when it's small I go with a [regular grid](https://ghiscoding.github.io/Angular-Slickgrid/#/basic).
-
-## Implementation
-To connect a backend service into `Slickgrid-Universal`, you simply need to modify your `gridOptions` and add a declaration of `backendServiceApi` and pass it the `service`. See below for the signature and an example further down below.
-
-### IMPORTANT NOTE
-All the code below assumes that your Backend Server (probably in C#) will return the data into an `items` property. You could return the array directly **but it is strongly discouraged to do that** because that will conflict with the `metrics` that you will see in the code below. The best approach is to return your data into a property, like `items` or any property name you wish to use, on your backend server side. Your result should have this kind of structure
-```ts
-{
-  items: [ /* your data */ ]
-}
-```
-
-### TypeScript Signature
-```typescript
-backendServiceApi: {
-  // Backend Service instance (could be OData or GraphQL Service)
-  service: BackendService;
-
-  // add any options you might want to provide to the backend service
-  options: OdataOption | GraphqlServiceOption;
-
-  // On init (or on page load), what action to perform?
-  onInit?: (query: string) => Promise<any>;
-
-  // Before executing the query, what action to perform? For example, start a spinner
-  preProcess?: () => void;
-
-  // On Processing, we get the query back from the service, and we need to provide a Promise. For example: this.http.get(myGraphqlUrl)
-  process: (query: string) => Promise<any>;
-
-  // After executing the query, what action to perform? For example, stop the spinner
-  postProcess: (response: any) => void;
-
-  // Throttle the amount of requests sent to the backend. Default to 500ms
-  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 Definition & call of `backendServiceApi`
-##### Notes
-- Pagination is optional and if not defined, it will use what is set in the [Slickgrid-Universal - Global Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/common/src/global-grid-options.ts)
-- `onInit` is optional and is there to initialize (pre-populate) the grid with data on first page load (typically the same call as `process`)
-  - you could load the grid yourself outside of the `gridOptions` which is why it's optional
-- `filterTypingDebounce` is a timer (in milliseconds) that waits for user input pause before querying the backend server
-  - this is meant to throttle the amount of requests sent to the backend (we don't really want to query every keystroke)
-  - 700ms is the default when not provided
-
-##### Code
-```ts
-import { Component, Injectable, OnInit } from '@angular/core';
-import { Column, GridOption } from 'angular-slickgrid';
-import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
-
-@Injectable()
-export class MyComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset = [];
-
-  constructor(private http: HttpClient) {}
-
-  ngOnInit() {
-    this.definedGrid();
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      // your column definitions
-    ];
-
-    this.gridOptions = {
-      enableFiltering: true,
-      enablePagination: true,
-      pagination: {
-        pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: defaultPageSize,
-        totalItems: 0
-      },
-      backendServiceApi: {
-        service: new GridOdataService(),
-        // define all the on Event callbacks
-        options: {
-          caseType: CaseType.pascalCase,
-          top: defaultPageSize
-        } as OdataOption,
-        preProcess: () => this.displaySpinner(true),
-        process: (query) => this.getCustomerApiCall(query),
-        postProcess: (response) => {
-          this.displaySpinner(false);
-          this.getCustomerCallback(response);
-        }
-      }
-    };
-  }
-
-  // Web API call
-  getCustomerApiCall(odataQuery) {
-    return this.http.get(`/api/getCustomers?${odataQuery}`);
-  }
-
-  getCustomerCallback(response) {
-    // totalItems property needs to be filled for pagination to work correctly
-    // however we need to force the Framework to do a dirty check, doing a clone object will do just that
-    let countPropName = 'totalRecordCount'; // you can use "totalRecordCount" or any name or "odata.count" when "enableCount" is set
-    if (this.isCountEnabled) {
-      countPropName = (this.odataVersion === 4) ? '@odata.count' : 'odata.count';
-    }
-    if (this.metrics) {
-      this.metrics.totalItemCount = data[countPropName];
-    }
-
-    // once pagination totalItems is filled, we can update the dataset
-    this.paginationOptions = { ...this.gridOptions.pagination, totalItems: totalItemCount } as Pagination;
-    this.dataset = data.items as Customer[];
-  }
-}
-```
-
-### Passing Extra Arguments to the Query
-You might need to pass extra arguments to your OData query, for example passing a `userId`, you can do that simply by modifying the query you sent to your `process` callback method. For example
-```ts
-// Web API call
-getCustomerApiCall(odataQuery) { with Fetch Client
-  const finalQuery = `${odataQuery}$filter=(userId eq 12345)`;
-  return this.http.get(`/api/getCustomers?${finalQuery}`);
-}
-```
-
-## OData options
-
-All options can be found here: [Slickgrid-Universal - OData Options](https://github.com/ghiscoding/slickgrid-universal/blob/master/packages/odata/src/interfaces/odataOption.interface.ts)
-
-Some are described in more detail below.
-
-### OData version
-
-By default the OData version is set to 2 because it was implemented with that version. If you wish to use version 4, then just change the `version: 4`, there are subtle differences.
-
-```ts
-this.gridOptions = {
-  backendServiceApi: {
-    service: new GridOdataService(),
-      options: {
-        enableCount: true, // add the count in the OData query, which will return a property named "odata.count" (v2) or "@odata.count" (v4)
-        version: 4        // defaults to 2, the query string is slightly different between OData 2 and 4
-      } as OdataOption,
-      process: (query) => this.getCustomerApiCall(query),
-      postProcess: (response) => {
-        this.metrics = response.metrics;
-        this.displaySpinner(false);
-        this.getCustomerCallback(response);
-      }
-  } as OdataServiceApi
-};
-```
-
-### Query total items count
-
-The total items count can be queried from the backend by:
-```ts
-const oDataOptions: OdataOption = {
-  enableCount: true;
-}
-```
-
-When enabled that will add `$inlinecount=allpages` (v2/v3) or `$count=true` (v4) to the query. And the count from the backend's response is extracted and `pagination.totalItems` is updated with that count. The property in the response that is used depends on the oData version specified: `d.__count` for v2, `__count` for v3 and `@odata.count` for v4. If needed a custom extractor function can be set through `oDataOptions.countExtractor`.
-
-### Query only the grid column's fields
-
-Query only the grid column's fields from the backend by:
-```ts
-const oDataOptions: OdataOption = {
-  enableSelect: true;
-}
-```
-
-For example `columns: [{ id: 'col1', field: 'field1' }, { id: 'col2', field: 'field2' }]` results in the query: `?$select=id,field1,field2`.
-
-A property `id` is always selected from the backend because the grid requires it. This property can be changed by setting `gridOptions.datasetIdPropertyName`.
-
-### Query related resources / expand navigation properties
-
-Specify that related resources (navigation properties) should be retrieved from the backend:
-```ts
-const oDataOptions: OdataOption = {
-  enableExpand: true;
-}
-```
-
-A navigation property is identified as a field having `/` in it's name. For example `columns: [{ id: 'col1', field: 'nav1/field1' }, { id: 'col2', field: 'nav2/field1' }]` results in the query `?$expand=nav1,nav2`
-
-Often `enableSelect` and `enableExpand` are used in conjunction. And with oData v4 then also navigation properties are selected from the backend. For example `columns: [{ id: 'col1', field: 'nav1/field1' }, { id: 'col2', field: 'nav2/field1' }]` results in the query `?$select=id,$expand=nav1($select=field1),nav2($select=field2)`
-
-```ts
-const oDataOptions: OdataOption = {
-  enableSelect: true;
-  enableExpand: true;
-  version: 4
-}
-```
-
-Navigations within navigations are also supported. For example `columns: [{ id: 'col1', field: 'nav1/subnav1/field1' }]`.
-
-The dataset from the backend is automatically extracted and navigation fields are flattened so the grid can display them and sort/filter just work. The exact property that is used as the dataset depends on the oData version: `d.results` for v2, `results` for v3 and `value` for v4. If needed a custom extractor function can be set through `oDataOptions.datasetExtractor`.
-For example if the backend responds with `{ value: [{ id: 1, nav1: { field1: 'x' }, { nav2: { field2: 'y' } } ] }` this will be flattened to `{ value: [{ id: 1, 'nav1/field1': 'x', 'nav2/field2': 'y' } ] }`.
-
-### Override the filter query
-
-Column filters may have a `Custom` operator, that acts as a placeholder for you to define your own logic. To do so, the easiest way is to provide the `filterQueryOverride` callback in the OdataOptions. This method will be called with `BackendServiceFilterQueryOverrideArgs` to let you decide dynamically on how the filter should be assembled.
-
-E.g. you could listen for a specific column and the active OperatorType.custom in order to switch the filter to a matchesPattern SQL LIKE search:
-
-```ts
-backendServiceApi: {
-  options: {
-    filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
-      if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
-        let matchesSearch = searchValues[0].replace(/\*/g, '.*');
-        matchesSearch = matchesSearch.slice(0, 1) + '%5E' + matchesSearch.slice(1);
-        matchesSearch = matchesSearch.slice(0, -1) + '$\'';
-
-        return `matchesPattern(${fieldName}, ${matchesSearch})`;
-      }
-    },
-  }
-}
-
-```

package/docs/backend-services/graphql/GraphQL-Filtering.md

@@ -1,156 +0,0 @@
-##### index
-- [filterBy](#filterby)
-- [Complex Objects](#complex-objects)
-- [Extra Query Arguments](#extra-query-arguments)
-- [Override the filter query](#override-the-filter-query)
-
-### Introduction
-The implementation of a GraphQL Service requires a certain structure to follow for `Slickgrid-Universal` to work correctly (it will fail if your GraphQL Schema is any different than what is shown below).
-
-### Implementation
-For the implementation in your code, refer to the [GraphQL Service](../GraphQL.md) section.
-
-### filterBy
-The filtering uses `filterBy` with a structure which we think is flexible enough. The query will have a `filterBy` argument with an array of filter properties:
-- `filterBy`: array of filter object(s) (see below)
-  - `field`: field name to filter
-  - `value`: search filter value
-  - `operator`: a GraphQL enum (server side) that can have 1 of these choices:
-    - `LT`, `LE`, `GT`, `GE`, `NE`, `EQ`, `Contains`, `Not_Contains`, `StartsWith`, `EndsWith`, `IN`, `NIN`
-      - `Contains` is the default and will be used (by the grid) when operator is not provided
-      - `IN` and `NIN` (alias to `NOT_IN`) are mainly used for multi-select filtering
-
-**Note:** the `filterBy` order is following the order of how the filter objects were entered in the array.
-
-For example, a filter that would search for a firstName that starts with "John"
-- matches: "John", "Johnny", ...
-```typescript
-users (first: 20, offset: 10, filterBy: [{field: firstName, operator: StartsWith, value: 'John'}]) {
-  totalCount
-  nodes {
-    name
-    firstName
-    lastName
-    gender
-  }
-}
-```
-
-### Complex Objects
-Dealing with complex objects are a little bit more involving. Because of some limitation with our [GraphQL for .Net](https://github.com/graphql-dotnet/graphql-dotnet) implementation, we decided to leave `field` as regular strings and keep the dot notation within the string. For that behavior to work, a new `keepArgumentFieldDoubleQuotes` property was added that can be passed to the GraphQL `initOptions()` function. For example, given a complex object field (defined in the Column Definition) that is `field: "billing.street"` will give this GraphQL query (if you have `keepArgumentFieldDoubleQuotes` set to True).
-
-##### Grid Definition example
-```ts
-import { Component, OnInit } from '@angular/core';
-import { Column, GridOption } from 'angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-basic.component.html'
-})
-export class GridBasicComponent implements OnInit {
-  columnDefinitions: Column[];
-  gridOptions: GridOption;
-  dataset: any[];
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true },
-      { id: 'company', name: 'Company', field: 'company', filterable: true },
-      { id: 'billingStreet', name: 'Billing Address Street', field: 'billing.address.street', filterable: true, sortable: true },
-      { id: 'billingZip', name: 'Billing Address Zip', field: 'billing.address.zip', filterable: true, sortable: true },
-    ];
-
-    this.gridOptions = {
-      backendServiceApi: {
-        service: new GraphqlService(),
-        process: (query) => this.userService.getAll<Customer[]>(query),
-        options: {
-          datasetName: 'customers'
-        }
-      }
-    };
-  }
-}
-```
-
-##### GraphQL Query
-```typescript
-// the orderBy/filterBy fields will keep the dot notation while nodes are exploded
-{
-  users(first: 20, offset: 0, filterBy: [{field: "billing.address.street", operator: EQ, value: "123 Queens Street"}]) {
-    totalCount,
-    nodes {
-      name,
-      company,
-      billing {
-        address {
-          street,
-          zip
-        }
-      }
-    }
-  }
-}
-```
-
-From the previous example, you can see that the `orderBy` keeps the (.) dot notation, while the `nodes` is exploded as it should `billing { street }}`. So keep this in mind while building your backend GraphQL service.
-
-### Extra Query Arguments
-If you want to pass extra arguments outside of the `filterBy` argument, that will be used for the life of the grid. You can do so by using the `extraQueryArguments` which accept an array of field/value. For example, let say you want to load a grid of items that belongs to a particular user (with a `userId`). You can pass the `extraQueryArguments` to the `backendServiceApi` `options` property, like so
-
-##### Component
-```typescript
-this.gridOptions = {
-  backendServiceApi: {
-    service: new GraphqlService(),
-    process: (query) => this.userService.getAll<User[]>(query),
-    options: {
-      datasetName: 'users',
-      extraQueryArguments: [{
-        field: 'userId',
-        value: 123
-      }]
-    }
-  }
-};
-```
-
-##### GraphQL Query
-```typescript
-// the orderBy/filterBy fields will keep the dot notation while nodes are exploded
-{
-  users(first: 20, offset: 0, userId: 123) {
-    totalCount,
-    nodes {
-      name,
-      company,
-      billing {
-        address {
-          street,
-          zip
-        }
-      }
-    }
-  }
-}
-```
-
-### Override the filter query
-
-Column filters may have a `Custom` Operator, that acts as a placeholder for you to define your own logic. To do so, the easiest way is to provide the `filterQueryOverride` callback in the GraphQL Options. This method will be called with `BackendServiceFilterQueryOverrideArgs` to let you decide dynamically on how the filter should be assembled.
-
-E.g. you could listen for a specific column and the active `OperatorType.custom` in order to switch the filter to an SQL LIKE search in GraphQL:
-
-> **Note** technically speaking GraphQL isn't a database query language like SQL, it's an application query language. Depending on your configuration, your GraphQL Server might already support regex querying (e.g. Hasura [_regex](https://hasura.io/docs/latest/queries/postgres/filters/text-search-operators/#_regex)) or you could add your own implementation (e.g. see this SO: https://stackoverflow.com/a/37981802/1212166). Just make sure that whatever custom operator that you want to use, is already included in your GraphQL Schema.
-```ts
-backendServiceApi: {
-  options: {
-    filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
-      if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
-        // the `operator` is a string, make sure to implement this new operator in your GraphQL Schema
-        return { field: fieldName, operator: 'Like', value: searchValues[0] };
-      }
-    },
-  }
-}
-```