角度Apollo设置WatchQuery结果为可用变量

2022-04-12 00:00:00 graphql javascript angular typescript apollo

ARTING/Apollo/TS新手，这快把我逼疯了，所以如果有任何帮助，我将不胜感激。

我正在努力设置一个小应用程序与角度10，阿波罗，和GraphQL API。我最近在Vue建造了同样的东西，我想重新创建这个项目会是一个很好的方法来获得一些角度。

我与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;
  }
}

我可以从我的组件调用getUser()函数，‘This’列出了服务，而在它内部‘USERS’列出了我的查询结果。但是，服务或组件中的this.user的console.log返回UNDEFINED。

我尝试了我能找到的所有类型的示例，包括来自Apollo文档的查询示例，以及使用Apollo和来自hasura.io的角度的示例。尝试使用管道和映射、PUCK、只是valueChanges、几个不同的订阅、在函数内设置一个变量以向其分配数据值、将查询设置为Variable、在组件中的ngOnInit中设置查询，以及其他一些我肯定会忘记的事情。似乎什么都不管用。在设置值之前，我考虑使用回调来等待查询返回，但我的理解是，我不应该做这样的事情。我肯定我错过了一些愚蠢的东西，或者我不知道阿波罗或安吉尔的事情，但我只是不确定我错过了什么。

有什么想法吗？

订阅

使用setTimeout不是理想的解决方案，您可以直接在推荐答案回调函数中更新组件变量，并在模板中随心所欲地处理它。请看我的例子

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>

相关文章