Angular Apollo Set watchQuery Results to a Usable Variable(角度Apollo设置WatchQuery结果为可用变量)
问题描述
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结果为可用变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:角度Apollo设置WatchQuery结果为可用变量
基础教程推荐
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在for循环中使用setTimeout 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 动态更新多个选择框 2022-01-01