时间戳

首页 > 解决方案 > 向 apollo watchQuery 添加标头会给出未定义的数据

angular - 向 apollo watchQuery 添加标头会给出未定义的数据

问题描述

我正在使用apollo-angular包来使用 graphQL 查询后端。一切正常，直到我将标题添加到查询中。

我正在添加自定义标头以从后端获取扁平数据。

当我向查询添加标题时，我得到的数据未定义。虽然我可以在网络选项卡中看到正确的响应（扁平数据）。

这是我的代码：

constructor(private apollo: Apollo) { }

getPos(id: string, date: string) : Observable<any> {
    return this.apollo
            .watchQuery({
                query: gql`
                {
                  pos(id: 10001, date: "2017-02-01") {
                    id
                    quantity
                    price
                    security {
                       id
                       ....
                    }
                    ....
                  }
                }`,
                context: { 
                   headers: new HttpHeaders().set("isFlatten", "true") // adding header
                }
            })
            .valueChanges
            .pipe(
              tap(resp => console.log(resp.data)),
              map(result => result.data['pos'])
            );
}

响应数据（展平）

{
  "data": [
    {
      "data.pos.security.__typename": "Security",
      "data.pos.quantity": 14,
      "data.pos.id": 3,
      "data.pos.price": 740.6634841227037,
      "data.pos.security.id": 296
       .............
    },
    {
      "data.pos.security.__typename": "Security",
      "data.pos.quantity": 34,
      "data.pos.id": 13,
      "data.pos.price": 755,
      "data.pos.security.id": 290
       ...........
    }]
}

注意：另外，如果我删除 context 属性，它会正确打印响应（非展平数据）

标签： angulargraphqlapollo-angular

解决方案

根据规范：

响应中的数据条目将是请求操作的执行结果。如果操作是查询，则此输出将是模式查询根类型的对象；如果操作是突变，则此输出将是模式的突变根类型的对象。

数据应该是一个对象，其键与文档中请求的根字段匹配（pos在本例中）。Apollo 期望值为data.pos，但由于data是一个数组并且没有此属性，因此它返回未定义。

像这样格式化你的 GraphQL 响应服务器端会破坏规范并使你的 API 与 apollo-client 不兼容。即使data是具有pos属性的对象，以这种方式格式化您的响应也可能会破坏缓存。

推荐阅读