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

本教程将介绍角度Apollo设置WatchQuery结果为可用变量的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

角度Apollo设置WatchQuery结果为可用变量 教程 第1张

问题描述

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>

 

好了关于角度Apollo设置WatchQuery结果为可用变量的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。