Angular Apollo 将 watchQuery 结果设置为可用变量

Question

Angular/Apollo/TS 的新手，这让我抓狂，所以感谢任何帮助。我正在使用 Angular 10、Apollo 和 GraphQL API 设置一个小型应用程序。我最近在 Vue 中构建了同样的东西，并且认为重新创建该项目是学习 Angular 的好方法。我与 API 的连接正常，我的查询也是如此，但我不知道如何将结果映射到数组，以便我可以在我的组件中访问它们。在订阅中使用 console.log 显示返回了正确的数据。“this”查询之外的 console.log 显示了查询结果，但是它们永远不会保存/映射到它们应该设置的变量。这是我的服务代码：import { Injectable } from '@angular/core';import { Apollo } from 'apollo-angular';import { Observable } from 'rxjs';import { map } from 'rxjs/operators';import gql from 'graphql-tag';const USER_SEARCH = gql`  query getUsers {    search(query: "moose", type: USER, first: 10) {       nodes {         ... on User {           login           email           location           name         }       }       pageInfo {         hasNextPage         hasPreviousPage         startCursor         endCursor       }       userCount     }  }`;export class UserService {  loading: boolean = true;  users: [];  constructor(private apollo: Apollo) { }  getUsers(): any {    this.apollo.watchQuery<any>({      query: USER_SEARCH    })      .valueChanges        .subscribe(({ data, loading }) => {         this.loading = loading;         this.users = data.search;        });        console.log(this);    return this.users;  }}我可以从我的组件调用 getUsers() 函数，'this' 列出了服务，'users' 里面列出了我的查询结果。但是，服务或组件中 this.users 的 console.log 返回未定义。我尝试了我能找到的所有类型的示例，包括来自 apollo 文档的查询示例，以及来自 hasura.io 的使用 apollo 和 angular 的示例。尝试使用管道和映射，采摘，只是 valueChanges，几个不同的订阅，在函数内设置一个变量来分配数据值，将查询设置为变量，在组件的 ngOnInit 中设置查询，以及其他一些事情我确定我忘记了。似乎没有任何效果。我研究过在设置值之前使用回调来等待查询返回，但我的理解是我不应该做那样的事情。我敢肯定这是我在 Apollo 或 Angular 中遗漏或不知道的愚蠢的东西，但我不确定我遗漏了什么。有任何想法吗？

Answer 1

this.getUsers = this.getUsers.bind(this);

在构造函数中？

Answer 2

usingsetTimeout 不是一个理想的解决方案，您可以直接在订阅回调函数中更新您的组件变量，并在您的模板中做任何您想做的事情。看我的例子

getItems() {

    this.apollo

      .watchQuery({

        query: this.getItemsQuery,

      })

      .valueChanges.subscribe((result: any) => {

        this.items = result?.data?.items;

      });

  }

并在模板中

<mat-option *ngFor="let item of items" [value]="item.price">

    {{ item.name }}

</mat-option>

Answer 3

也许不是理想的解决方案，所以我仍然愿意尝试其他事情，但我能够通过在服务中使用带有计时器的承诺，然后在组件中使用异步等待来获取组件中设置的值。

服务

  getUsers(): any {

    return  new Promise((resolve, reject) => {

      let me = this;

      this.apollo.watchQuery<any>({

        query: USER_SEARCH

      })

        .valueChanges

          .subscribe(({ data, loading }) => {

           this.loading = loading;

           this.users = data.search;

         });

      setTimeout( function() {

        if(me.users !== 'undefined'){

          resolve(me.users)

        }

      }, 1000)

    })

  }

成分

  async getUsers(): Promise<any> {

      this.users = await this.userService.getUsers();

      console.log(this.users);

  }

这允许从服务中设置 this.users。据我所知，当 Angular 开始设置值时，Apollo 仍在运行查询，导致值最初显示为未定义，但我的服务在控制台中具有来自查询的值。不确定 Apollo 或 Angular 是否有更好的方法来解决这个问题，但如果有的话，我很想听听。