Question

我在项目中使用了 Angular 7 ， Apollo Server ， MongoDB 。我有问题。

Apollo Graphql查询在 ngOnInit 函数中运行一次。但是正如您在我的代码示例中看到的那样，我希望在触发 onPageChanged 函数时刷新查询。 OnPageChanged ，或者当我将graphQL代码放在其他函数中时，这些代码第二次无法使用。我需要做什么来随时规范我的查询。你能帮我吗？

import { Component, OnInit } from '@angular/core';
import { AdminAuthorsGQL, Authors } from 'src/generated-models';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { PageEvent } from '@angular/material';

@Component({
  selector: 'app-admin-authors',
  templateUrl: './admin-authors.component.html',
  styleUrls: ['./admin-authors.component.scss']
})

export class AdminAuthorsComponent implements OnInit {
  public displayedColumns: string[] = ['no', 'image', 'name', 'translator', 'books', 'transactions'];

public table = {
    display: false,
    text: 'table'
  };

public form = {
    display: false,
    text: 'form'
  };

authors$: Observable<Authors.Authors[]>;

pageEvent: PageEvent;

pageSize: number = 25; // default

skip: number = 0;

length = 1000;

pageSizeOptions: number[] = [5, 10, 25, 50, 100];

isLoadingResults: boolean = false;
isNoDataFound: boolean = false;

constructor(private adminAuthorsGql: AdminAuthorsGQL) {}

ngOnInit() {
    this.authors$ = this.adminAuthorsGql
    .watch({ skip: this.skip, limit: this.pageSize })
    .valueChanges.pipe(map(result => result.data.authorsWithPaginate));

    this.isLoadingResults = false;
    this.isNoDataFound = false;
  }

setPageSizeOptions(setPageSizeOptionsInput: string) {
    this.pageSizeOptions = setPageSizeOptionsInput.split(',').map(str => +str);
  }

onPageChanged(e) {
    console.log(e);
    this.pageSize = e.pageSize;
    this.authors$ = this.adminAuthorsGql
    .watch({ skip: this.skip, limit: this.pageSize })
    .valueChanges.pipe(
     map(result => result.data.authorsWithPaginate)
);
}

authorEdit(id) {
    this.table.display = this.table.display === false;
    console.log('authorEdit:',id, this.table.display);
    return this.authors$;
  }

authorDelete(id) {
    this.table.display = this.table.display === false;
    console.log('authorDelete:',id, this.table.display);
    return this.authors$;
    }

onRowClicked(row) {
    console.log('Row clicked: ', row);    
    }

}

Apollo GraphQL查询仅工作一次。如何再次运行？

0 个答案: