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&nbsp;=&nbsp;this.getUsers.bind(this);在构造函数中？

Answer 2

usingsetTimeout 不是一个理想的解决方案，您可以直接在订阅回调函数中更新您的组件变量，并在您的模板中做任何您想做的事情。看我的例子getItems() {&nbsp; &nbsp; this.apollo&nbsp; &nbsp; &nbsp; .watchQuery({&nbsp; &nbsp; &nbsp; &nbsp; query: this.getItemsQuery,&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; .valueChanges.subscribe((result: any) => {&nbsp; &nbsp; &nbsp; &nbsp; this.items = result?.data?.items;&nbsp; &nbsp; &nbsp; });&nbsp; }并在模板中<mat-option *ngFor="let item of items" [value]="item.price">&nbsp; &nbsp; {{ item.name }}</mat-option>

Answer 3

也许不是理想的解决方案，所以我仍然愿意尝试其他事情，但我能够通过在服务中使用带有计时器的承诺，然后在组件中使用异步等待来获取组件中设置的值。服务&nbsp; getUsers(): any {&nbsp; &nbsp; return&nbsp; new Promise((resolve, reject) => {&nbsp; &nbsp; &nbsp; let me = this;&nbsp; &nbsp; &nbsp; this.apollo.watchQuery<any>({&nbsp; &nbsp; &nbsp; &nbsp; query: USER_SEARCH&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; .valueChanges&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .subscribe(({ data, loading }) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.loading = loading;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.users = data.search;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; setTimeout( function() {&nbsp; &nbsp; &nbsp; &nbsp; if(me.users !== 'undefined'){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve(me.users)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; })&nbsp; }成分&nbsp; async getUsers(): Promise<any> {&nbsp; &nbsp; &nbsp; this.users = await this.userService.getUsers();&nbsp; &nbsp; &nbsp; console.log(this.users);&nbsp; }这允许从服务中设置 this.users。据我所知，当 Angular 开始设置值时，Apollo 仍在运行查询，导致值最初显示为未定义，但我的服务在控制台中具有来自查询的值。不确定 Apollo 或 Angular 是否有更好的方法来解决这个问题，但如果有的话，我很想听听。