I have updated the previously provided sample where the Apollo package is not used anymore. Please test the sample on your side and let me know whether you find it helpful.

Please note that this is a just an example how the Advanced Filtering feature of IgxHierarchicalGrid can work with GraphQL server and you should make some changes in order the feature to work properly with the configuration on your side.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

I have created a sample, demonstrating how the Ignite UI for Angular Hierarchical Grid can work with GraphQL.

By using the emitted FilteringExpressionsTree argument of the advancedFilteringExpressionsTreeChange event we can get all of the filtering expressions and build a GET query:

public ngAfterViewInit() {
 ...
    this.hGrid.advancedFilteringExpressionsTreeChange.subscribe(e => {
      ...
      this.remoteService.getData(dataState, filteringOperands).subscribe(
        (data: any[]) => {
          this.hGrid.isLoading = false;
          this.hGrid.data = data;
          this.hGrid.cdr.detectChanges();
        },
        (error: any) => {
          this.hGrid.emptyGridMessage = error.message;
          this.hGrid.isLoading = false;
          this.hGrid.cdr.detectChanges();
        }
      );
    });
  }

Then, all needed queries we can send to the server, where the filtering takes place:

public buildQueries(filteringOperands: any[]): any {
        const result: IFilteringOperand[] = [];
        filteringOperands.forEach(operand => {
            const fieldName = operand.FieldName;
            const searchValueString = typeof operand.searchVal === 'string' ? operand.searchVal : '';
            const searchValueNumber = typeof operand.searchVal === 'number' ? operand.searchVal : null;
            const conditionName = operand.condition.name;
            result.push({ fieldName, searchValueString, searchValueNumber, conditionName });
        });
        return JSON.stringify(result);
    }

The subscription for the advancedFilteringExpressionsTreeChange event of the child grids can be made when the gridCreated event is handled, which returns instances of the created child grid:

public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
  ...
    const grid = event.grid
    event.grid.advancedFilteringExpressionsTreeChange.subscribe(e => {
      ...
      this.remoteService.getData(dataState, filteringOperands).subscribe(
        (data: any[]) => {
          grid.isLoading = false;
          grid.data = data;
          grid.cdr.detectChanges();
        },
        (error: any) => {
          grid.emptyGridMessage = error.message;
          grid.isLoading = false;
          grid.cdr.detectChanges();
        }
      );
    });
  }

Please keep in mind that I am using the Load on Demand feature for the initially loading of the child grids. More about this feature you can find here.

Please test the sample on your side and let me know whether you find it helpful.

Looking forward to hearing from you.

Regads,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

Could you please confirm that you are not able to visit the Hierarchical Grid Remote Data Operations help topic  (https://ko.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/remote-data-operations)? If this is true, what I can suggest is copying the above link and try to visit the page with it.

Regarding your requirement I am currently looking into this matter for you. I will keep you posted on my progress and I will get back to you as soon as possible with more information or questions for you.

Please feel free to continue sending updates to this case at any time.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.