1

I am using apollo-angular package to query backend using graphQL. Everything works fine until I add headers to the query.

I am adding custom header to get flattened data from the backend.

When I add header to the query I get data as undefined. Though I can see the response coming properly (flattened data) within the networks tab.

Here is my code :

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'])
            );
}

Response data (flattened)

{
  "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
       ...........
    }]
}

Note : Also If I remove the context attribute it does print the response properly (non-flattened data)

Amit Chigadani
  • 28,482
  • 13
  • 80
  • 98
  • How is the data "flattened"? Does the returned JSON still meet the spec? – Daniel Rearden Jan 04 '19 at 14:41
  • Yes, with and without header it shows the proper JSON response in networks tab. Only thing is it prints undefined when I add header. – Amit Chigadani Jan 04 '19 at 14:46
  • As you mentioned, it has something to do with flattened data I guess. When I set `isFlatten` as false it prints unflattened data. So no issue with the header here. – Amit Chigadani Jan 04 '19 at 14:50
  • Can you post a query and the response from the server? – Daniel Rearden Jan 04 '19 at 15:31
  • @DanielRearden I have added the response. Please have a look – Amit Chigadani Jan 04 '19 at 17:29
  • It's unclear what you're trying to achieve by doing this sort of response formatting, but there's probably a better way of going about it that won't break the client. You could elaborate on your intent, although that may be outside the scope of this question and should probably be a separate one. – Daniel Rearden Jan 04 '19 at 17:46

1 Answers1

1

Per the spec:

The data entry in the response will be the result of the execution of the requested operation. If the operation was a query, this output will be an object of the schema’s query root type; if the operation was a mutation, this output will be an object of the schema’s mutation root type.

Data is expected to be an object, with keys that match the requested root fields in your document (pos in this case). Apollo expects to a value at data.pos, but since data is an array and doesn't have this property, it returns undefined.

Formatting your GraphQL response server-side like this breaks the spec and makes your API incompatible with apollo-client. Even if data was an object with a pos property, formatting your response in this way is probably going to break caching as well.

Daniel Rearden
  • 80,636
  • 11
  • 185
  • 183