I am unable to subscribe to graphql api using amplify in angular codebase

[DeepthiJainHP]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

GraphQL API

Amplify Version

Older than v5

Amplify Categories

api, notifications

Backend

Other

Environment information

``` # Put output below this line ```

websocket initial handshake is getting failed

Describe the bug

I have installed aws-amplify package of v4 and have graphl endpoint with Auth key authentication method(which is created manually using aws). Inspite of using Amplify configure command have manually set the configuratin file with API key auth and configuration file details are below const awsconfig = { aws_project_region:'us-XX', aws_appsync_graphqlEndpoint:'https:XXXXXXX/graphql', aws_appsync_region:'us-XXX', aws_appsync_authenticationType:'apiKey', aws_appsync_apiKey:'da2XXXXXXXXXXXX' }; export default awsconfig;

and in main.ts import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; import {Amplify} from 'aws-amplify'; import awsconfig from './aws-exports'; Amplify.configure({ aws_project_region:'us-XXXXXXX', aws_appsync_graphqlEndpoint:'https://XXXXXXXX/graphql', aws_appsync_region:'us-XXXXXXX', aws_appsync_authenticationType:'apiKey', aws_appsync_apiKey:'da2XXXXXXX' });

Amplify.configure(awsconfig); Amplify.configure({ API: { graphql_headers: async () => ({ 'host':'XXXXXXXX', 'x-api-key':'da2XXXXXXXXX' }) } }); if (environment.production) { enableProdMode(); }

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));

API.service.ts file import { Injectable } from "@angular/core"; import API,{graphqlOperation} from "@aws-amplify/api"; export type MyQueryQuery = { __typename: string; desc: string | null; id: string; name: string; };

export type OnCreateTodoSubscription = { __typename: string; desc: string | null; id: string; name: string; }; @Injectable({ providedIn: "root" }) export class APIService { }

app.component.ts file import { Component ,OnInit } from '@angular/core'; //import { APIService } from './API.service'; //import { AppSyncService } from './API.service'; import { API } from 'aws-amplify'; import { APIService } from './API.service'; import { GraphQLQuery } from '@aws-amplify/api';

import { MyQueryQuery } from './API.service'; import { OnCreateTodoSubscription } from './API.service';

import { GraphQLSubscription } from '@aws-amplify/api'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements OnInit { title = 'appsync'; allTodos:any = []; todos:any = []; constructor(private api:APIService) { }

ngOnInit(): void {
const subsQuery = subscription MySubscription { subscribe { id name desc } }; const querypost = query MyQuery { allPosts{ desc id name } };

API.graphql<GraphQLQuery<MyQueryQuery>>({ query: querypost }).then(result=>
  this.todos.push(result)
);  
console.log(this.todos);

const createSub = API.graphql<GraphQLSubscription<OnCreateTodoSubscription>>({
  query: subsQuery,
}).subscribe({
  next: ({ provider, value }) => console.log({ provider, value }),
  error: (error) => console.warn(error)
});

}

}

where query is working fine but subscription is not happening

Expected behavior

expecting subscribe to happen.

Reproduction steps

Installed aws-amplify of version 4

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @DeepthiJainHP 👋 and sorry to hear you're running into this issue. If the issue is happening on v4.x of Amplify, can I start by clarifying if there's a reason you're trying to use this older version? And is the connection_error happening on every subscription attempt?

[chrisbonifacio]

Also, please share your GraphQL schema so that we can try to reproduce the issue on our end.

I'd also be curious to see if you receive the same error if you attempt the subscription from the AWS AppSync console. Can you try and confirm whether it occurs there as well or only in the web app using the Amplify library?

[DeepthiJainHP]

Hello, @DeepthiJainHP 👋 and sorry to hear you're running into this issue. If the issue is happening on v4.x of Amplify, can I start by clarifying if there's a reason you're trying to use this older version? And is the connection_error happening on every subscription attempt?

Hello @cwomack , I am using the older version to support my angular project of 13 version. Yes this is this happening each time on subscription attempt

[DeepthiJainHP]

Also, please share your GraphQL schema so that we can try to reproduce the issue on our end.

I'd also be curious to see if you receive the same error if you attempt the subscription from the AWS AppSync console. Can you try and confirm whether it occurs there as well or only in the web app using the Amplify library?

Hi @chrisbonifacio , subscription is happening on AWS appsync console but facing issue in WebApp with amplify, the below is the schema which I am using

type Post {
    id: ID!
    name: String!
    desc: String
}

type Mutation {
    # Put a single value of type 'Post'.
    # If an item exists it's updated. If it does not it's created.
    putPost(id: ID!, name: String!, desc: String): Post!
}

type Query {
    # Get a single value of type 'Post' by primary key.
    singlePost(id: ID!): Post
    allPosts: [Post]
}

type Subscription {
    subscribe: Post
        @aws_subscribe(mutations: ["putPost"])
}

schema {
    query: Query
    mutation: Mutation
    subscription: Subscription
}

[chrisbonifacio]

@DeepthiJainHP Apologies for the delayed response, it seems you shared the output schema. I was curious to see the input schema that uses the Amplify directives such as @model, @auth, etc.

Can you share that one instead?

Do you happen to be using a function using the Go runtime to resolve a mutation such as putPost?

If so, please share the code for that function's handler as well.

[cwomack]

Hey, @DeepthiJainHP 👋. Just wanted to give you a ping and see if you're still experiencing this or had a chance to review the comment above. Thanks!

[chrisbonifacio]

Hi 👋 Closing this as we have not heard back from you. If you are still experiencing this issue and in need of assistance, please feel free to comment and provide us with any information previously requested by our team members so we can re-open this issue and be better able to assist you.

Thank you!