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 返回 undefined。

我已經嘗試了我能找到的所有類型的示例，包括來自 apollo 文檔的查詢示例，以及使用來自 hasura.io 的帶有角度的 apollo 的示例。 嘗試使用管道和地圖，采摘，只是 valueChanges，一些不同的訂閱，在函數內部設置一個變量以將數據值分配給，將查詢設置為變量，在組件中的 ngOnInit 中設置查詢，以及其他一些事情我確定我忘記了。 似乎沒有任何效果。 我研究過在設置值之前使用回調來等待查詢返回，但我的理解是我不應該這樣做。 我確定這是我在 Apollo 或 Angular 中遺漏或不知道的一些愚蠢的東西，但我只是不確定我遺漏了什么。

有任何想法嗎？

Answer 1

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

在構造函數中？

Answer 2

使用setTimeout不是一個理想的解決方案，您可以直接在 subscribe 回調函數中更新您的組件變量，並在您的模板中做任何您想做的事情。 看我的例子

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 是否有更好的方法來解決這個問題，但如果是這樣，我很想聽聽。

謝謝！