[英]Apollo-Angular query return weird behaviour
I am trying to connect Angular with a GraphQL backend.我正在尝试将 Angular 与 GraphQL 后端连接。
However, when angular-apollo requests data from GraphQL, the data is being sent correctly but when I want to access it, it returns undefined
.但是,当 angular-apollo 从 GraphQL 请求数据时,数据正在正确发送,但是当我想访问它时,它返回
undefined
。
In the following code, updateItems()
is working correctly but getItems()
not.在下面的代码中,
updateItems()
工作正常,但getItems()
没有。
import { EventEmitter, Injectable } from '@angular/core';
import { Apollo } from 'apollo-angular';
import gql from 'graphql-tag';
const GET_ITEMS = gql`
{
items(limit: 1) {
name
rank
}
}
`;
const GET_ITEM = gql`
query Item($name: String!) {
item(name: $name) {
currency
history {
timestamp
price
volume
}
}
}
`;
type ItemType = {
name: string,
rank: number
}
type ItemhistoryType = {
name: string,
currency: string,
history: {
timestamp: number,
price: number,
volume: number
}[]
}
type Query = {
items: ItemType[];
}
type ItemQuery = {
itemhistory: ItemhistoryType;
}
@Injectable()
export class ItemsService {
items: ItemType[] = [];
itemStatus = new EventEmitter<ItemType[]>();
itemhistories: ItemhistoryType[] = [];
itemhistoryStatus = new EventEmitter<ItemhistoryType>();
constructor(private apollo: Apollo) {
this.updateItems();
}
getItems() {
return this.items.slice();
}
updateItems() {
this.apollo.query<Query>({
query: GET_ITEMS
}).subscribe(result => {
this.items = result.data.items as ItemType[];
console.log(this.items);
this.itemStatus.emit(this.items.slice());
});
}
getItem(name: string) {
console.log(name);
this.apollo.query<ItemQuery>({
query: GET_ITEM,
variables: { name: name }
}).subscribe(result => {
console.log(result.data); // shows data correctly
let itemhistory = result.data.itemhistory as ItemhistoryType;
console.log(itemhistory); // -> undefined
});
}
}
In getItem(name)
, the console.log(result.data)
call shows this in the console:在
getItem(name)
中, console.log(result.data)
调用在控制台中显示:
{item: {…}}
item:
currency: "€"
history: (2287) [{…}, …]
__typename: "Itemhistory"
__proto__: Object
__proto__: Object
which is correct but when I try to log itemhistory
it shows undefined
.这是正确的,但是当我尝试记录
itemhistory
时,它显示undefined
。 Also I can't access result.data.item
because it does not exist.我也无法访问
result.data.item
因为它不存在。
Does anyone know what the problem is?有谁知道问题是什么? I am thankful for every answer.
我感谢每一个答案。
I have fixed the issue but the solution is not perfect.我已经解决了这个问题,但解决方案并不完美。 Instead of
result.data.item
I need to call result?.data?.item
.我需要调用
result?.data?.item
result.data.item
The new method is:新方法是:
getItem(name: string) {
this.apollo.query({
query: GET_ITEM,
variables: {
name: name
}
})
.subscribe((result: any) => {
const history = result?.data?.item as ItemhistoryType;
this.itemhistories.push(history);
this.itemhistoryStatus.emit(history);
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.