Apollo-angular: Error: Network error: Cannot read property 'append' of undefined

[jiharal]

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)

[jiharal]

export class AppModule {
  constructor(apollo: Apollo, httpLink: HttpLink) {
    // apollo.create({
    //   link: httpLink.create({
    //     uri: 'http://localhost:6060/authscure'
    //   }),
    //   cache: new InMemoryCache()
    // });
    const http = httpLink.create({ uri: 'http://localhost:6060/graphql' });

    const auth = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      // const token = localStorage.getItem('token');
      const token = "graphql";
      const signature = "FAC2CA55ED98AB2E399DS632247CD70121DB194B52224D7DFF40A919865130DC1A2409";
      // return the headers to the context so httpLink can read them
      // in this example we assume headers property exists
      // and it is an instance of HttpHeaders



      if (!token) {
        return {};
      } else {

        return {
          headers: headers.append('Authorization', `Bearer ${token}`)

        };
      }
    });

   apollo.create({
    link: auth.concat(http),
    cache: new InMemoryCache(),
   });

  }
}

[kamilkisiela]

@s1gu Maybe there's no headers?

``ts return { headers: headers.append('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()
      });

    });



  }

}

[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}`
    }
};

[kamilkisiela]

Yes, with Angular 6 it's no longer required to use HttpHeaders, simple objects are fine.