Angular Material table pagination with GraphQL backend

Question

I need to add pagination to Angular Material table. My data response is from GraphQL back-end is like this:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

import { MatTableDataSource } from '@angular/material/table';
import { Apollo, gql } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';



interface Imp_Type {
  uuid: string;
  imp_type_name: string;
  imp_sub_group: string;
  }

  interface Response {
    imp_type: Imp_Type[]
  }

  const GET_IMP_TYPE = gql`
  query Imp_Type {
    imp_type (limit: 10){
      uuid
      imp_type_name
      imp_sub_group {
        imp_group_id
        sub_grou_name
      }
    }
  }
  `;


@Component({
  selector: 'app-imp-type',
  templateUrl: './imp-type.component.html',
  styleUrls: ['./imp-type.component.scss']
})
export class ImpTypeComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;

  //imp_type$: Observable<Imp_Type[]>;

  query_data = this.apollo.watchQuery<Response>({
    query:GET_IMP_TYPE
  }).valueChanges.pipe(map(result => result.data.imp_type));


  constructor(private apollo: Apollo) { }

  displayedColumns: string[] = ['uuid', 'imp_type_name', 'sub_grou_name'];
  dataSource = new MatTableDataSource(this.query_data);


  ngOnInit(): void {

  }   
}

When I add "query_data" to MatTableDataSource, I get this error:

Argument of type 'Observable<Imp_Type[]>' is not assignable to parameter of type 'unknown[]'. Type 'Observable<Imp_Type[]>' is missing the following properties from type 'unknown[]': length, pop, push, concat, and 25 more.ts(2345)

How can I resolve this problem?

Answer 1

You have to assign dataSource with subscribe event of the Observable as below:

export class ImpTypeComponent implements OnInit {

  @ViewChild(MatPaginator) paginator: MatPaginator;
 
  constructor(private apollo: Apollo) { }
  
  displayedColumns: string[] = ['uuid', 'imp_type_name', 'sub_grou_name'];
  dataSource!: MatTableDataSource<Imp_Type>;
  

  ngOnInit(): void {
    this.apollo.watchQuery<Response>({
      query:GET_IMP_TYPE
    })
    .valueChanges
    .pipe(map(result => result.data.imp_type))
    .subscribe((result: Imp_Type[]) => this.dataSource = new MatTableDataSource(result));
  }   
}