Apollo Graphql with Angular with headers not being passed

Apollo Graphql with Angular with headers not being passed


0

I need to add headers to my graphql requests with angular, but I didn’t find any way. Headers is added when I use query but not mutate. Also, mutate will works if I didn’t add headers. Here is my code:

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Amplify } from 'aws-amplify';
import {AppsyncService} from './appsync.service';
import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { AuthGuard } from './services/authcheck.guard';
import {MatSidenavModule} from '@angular/material/sidenav';
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
import { HttpLink, HttpLinkModule } from 'apollo-angular-link-http';
import { HttpHeaders } from '@angular/common/http';
import { InMemoryCache } from '@apollo/client/core';
import { Apollo, APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';

export function HttpLoaderFactory(https: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

let awsConfig ;
Amplify.configure(awsConfig);

const uri = 'https://www.xxxxxxx..appsync-api.ap-southeast-1.amazonaws.com/graphql';

export function createApollo(httpLink: HttpLink): any {
  const http = httpLink.create({ uri });
  console.log(http);
  // Add headers to the HTTP link
  const authHeader = new HttpHeaders().set('Host', 'abc.com'); 
  const link = httpLink.create({ uri, headers: authHeader });

  console.log(link);
  return {
    link,
    cache: new InMemoryCache(),
  };
}

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MatSidenavModule,
    NgxSkeletonLoaderModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
          provide: TranslateLoader,
          useFactory: HttpLoaderFactory,
          deps: [HttpClient]
      }
    })
  ],
  exports: [
    TranslateModule,
    HttpClientModule, ApolloModule, HttpLinkModule
  ],
  providers: [
    AuthGuard,
    AppsyncService,
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
    {
      provide: MatDialogRef,
      useValue: {}
    },
    { provide: MAT_DIALOG_DATA, useValue: {} },
  ],
  bootstrap: [AppComponent]

})
export class AppModule { }

Its not passing the header to my graphql requets.Is there anything that I am missing or doing wrong?

1 Answer
1


0

Try like this,

      const basic = setContext((op, ctx) => ({
        headers: new HttpHeaders().set('Host', 'abc.com')
      }));
     
      const link = ApolloLink.from([basic, httpLink.create({ uri })]);
     
      return {
        link,
        cache: new InMemoryCache()
      };

1

  • Thank you. But my main issue is that it is not going to createApollo function. The log I have in the first line of the function is not bring printed. @Sajeetharan

    – Cristal

    16 mins ago



Leave a Reply

Your email address will not be published. Required fields are marked *