Error: Network error: Cannot read property 'append' of undefined

there was an error sending the query Error: Network error: Cannot read property 'append' of undefined 
at new ApolloError (ApolloError.js:34)
at Object.error (QueryManager.js:118)
at SubscriptionObserver.error (zen-observable.js:178)     
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)     
at Object.onInvoke (core.es5.js:3890)     
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)     
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (zone.js:138)     
at zone.js:858    
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)     at Object.onInvokeTask (core.es5.js:3881)

[albertonaperijr]

I’d encountered the same issue before. I’d successfully passed the authorization header by directly putting it inside the headers object.

return {
    headers: {
        Authorization: `Bearer ${token}`
    }
};

[juansmolano]

@kamilkisiela @apollographql HI, I was about to open a new issue but I saw this first. I had the same problem.

The solution is in this doc: https://github.com/apollographql/apollo-angular/tree/master/packages/apollo-angular-link-headers

It seems there is documentation mismatch.

The solution that is working for me is:

const auth = setContext((request, previousContext) => ({ authorization: token }));

Below is the full service, and it is working: note: the token is gather by KeyCloak and is used on HTTP and WS

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import { KeycloakService } from 'keycloak-angular';
import { HttpHeaders } from '@angular/common/http';
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { split } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { httpHeaders } from 'apollo-angular-link-headers';


@Injectable()
export class GatewayService {

  constructor(
    public apollo: Apollo,
    private httpLink: HttpLink,
    private keycloakService: KeycloakService
  ) {

    //HTTP end-point
    const http = httpLink.create({ uri: environment.api.gateway.graphql.httpEndPoint });


    this.keycloakService.getToken().then(token => {


      const auth = setContext((request, previousContext) => ({
        authorization: token
      }));

      // //Add the JWT token in every request
      // const auth = setContext((operation, {headers}) => {

      // Create a WebSocket link:
      const ws = new WebSocketLink({
        uri: environment.api.gateway.graphql.wsEndPoint,
        options: {
          reconnect: true,
          connectionParams: {
            authToken: token,
          },
        }
      });



      // using the ability to split links, you can send data to each link
      // depending on what kind of operation is being sent
      const link = split(
        // split based on operation type
        ({ query }) => {
          const { kind, operation } = getMainDefinition(query);
          return kind === 'OperationDefinition' && operation === 'subscription';
        },
        ws,
        auth.concat(http),
      );


      //Create Apollo client
      this.apollo.create({
        link,
        cache: new InMemoryCache()
      });

    });



  }

}