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

如何解决Angular Apollo将watchQuery结果设置为可用变量

Angular / Apollo / TS的新手，这真让我发疯，因此，感谢您的帮助。

我正在使用Angular 10，Apollo和GraphQL API设置一个小型应用程序。我最近在Vue中构建了同样的东西，并认为重新创建该项目将是选择一些Angular的好方法。

我与API的连接正在运行，查询也一样，但是我不知道如何将结果映射到数组，以便可以在组件中访问它们。在预订中使用console.log会显示返回了正确的数据。在“此”查询之外的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中使用angular的apollo示例。使用管道和地图进行尝试，选择，仅进行valueChanges，一些不同的预订，在函数内设置一个变量以将数据值分配给该变量，将查询设置为变量，在组件的ngOnInit中设置查询以及其他一些操作我确定我会忘记。似乎没有任何作用。我研究了使用回调函数来等待查询返回，然后再设置值，但是我的理解是我不必做任何类似的事情。我确定对于Apollo或Angular来说，这是我所缺少或不知道的东西，但我只是不确定我所缺少的是什么。

有什么想法吗？

解决方法

data1

在构造函数中？

使用setTimeout并不是理想的解决方案，您可以直接在subscription回调函数中更新组件变量，并可以在模板中对其进行任何处理。看我的例子

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>

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

服务

  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是否有更好的方法来解决此问题，但如果是这样，我很想听听。

谢谢！