ERROR ApolloError: SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

[rahulmohanperfomatix]

Hi, I was trying to integrate Apollo Client in our angular app. All the documented step been followed but getting below error when running the app. Reference document followed - LINK. We are using Hasura for api requests.

app.component.ts:41 ERROR ApolloError: SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL

Packages Installed -

• ng add apollo-angular

Using - Angular 15, Hasura(for api)

File - src/app/graphql.module.ts

import {NgModule} from '@angular/core';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {ApolloClientOptions, InMemoryCache} from '@apollo/client/core';
import {HttpLink} from 'apollo-angular/http';

const uri = 'https://fancy-louse-96.hasura.app/v1/graphql'; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> { return { link: httpLink.create({uri}), cache: new InMemoryCache(), }; }

@NgModule({ exports: [ApolloModule], providers: [ { provide: APOLLO_OPTIONS, useFactory: createApollo, deps: [HttpLink], }, ], })
export class GraphQLModule {}

File - src/app/app.component.ts

import { Component, OnInit } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], })
export class AppComponent implements OnInit {

` constructor(private _apollo: Apollo) {}

ngOnInit(): void {
    this._apollo
  .watchQuery({
    query: gql`
       {
        role {
          created_at
          created_by
          deleted_at
          deleted_by
          id
          name
        }
      } ,
  }).valueChanges.subscribe((result: any) => {
    console.log( result.data);
  });

}`

}

Any help appreciated.
Thank you.

[rahulmohanperfomatix]

This was a minor error from my side. Actually angular interceptor was replacing the original url with an empty string. Closing this issue.