Question

我正在使用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属性，它会正确打印响应（非拼合数据）

Answer 1

根据规格：

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

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

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

将标题添加到阿波罗watchQuery可提供未定义的数据

1 个答案: