Appsync Subscription through browser (ReactJS and MQTT.js)

Question

I'm trying to connect to an Appsync subscription through a React app via web browser.  
  
I seem to be connected, but I'm not receiving any messages/packets when I post new messages through postMessage mutation.  
  
The Appsync API uses Cognito User Pool as authorization mode  
  
**_Schema_**

```
schema {
  query: Query
  mutation: Mutation
  subscription: Subscription
}
type Query {
  getUser: String
}
type Mutation {
  postMessage(groupId: ID!, message: String!): Message!
}
type Subscription {
  postedMessage(groupId: ID!): Message
    @aws_subscribe(mutations: ["postMessage"])
}
type Message {
  groupId: ID!
  id: ID!
  CreateTime: Int!
  message: String!
  author: String!
}
```

**_ReactJS and MQTT.js_**

```
import mqtt from 'mqtt'
...
  subToNewMessages() {
    var groupId = this.props.group.id
    var query = `subscription PostedMessage($groupId: ID!) {
  postedMessage(groupId: $groupId){id, CreateTime, message, author}
}`
    httpReq(
      {
        method: 'POST',
        body: JSON.stringify({
          query: query,
          variables: { groupId }
        }),
        url: 'https://mygraphqlendpoint.com',
          // the graphql endpoint sits behind an API Gateway which goes through an authorizer
        headers: [
          ['Content-Type', 'application/json'],
          // SessionId is traded for JWT token through API Gateway Authorizer
          ['SessionId', localStorage.getItem('sessionId')] 
        ]
      },
      xhr => {
        console.log(xhr)
          var parsedResponse = JSON.parse(xhr.responseText).extensions
            .subscription.mqttConnections
          console.log(parsedResponse)

          var client = mqtt.connect(parsedResponse[0].url, {
            clientId: parsedResponse[0].client
          })
          client.on('connect', function() {
            console.log('connected')
            client.subscribe(parsedResponse[0].topics[0], function(
              err,
              granted
            ) {
              if (!err) {
                console.log(granted)
              } else {
                console.log(err)
              }
            })
          })
          client.on('error', function(err) {
            console.log(err)
          })
          client.on('reconnect', function() {
            console.log('reconnecting')
          })
          client.on('message', function(topic, message, packet) {
            console.log(topic)
            console.log(message.toString())
            console.log(packet)
          })
          client.on('packetreceive', function(packet) {
            console.log(packet)
          })
      }
    )
  }
```

**__parsedResponse_ from graphql endpoint POST_**

```
0:
client: "lidtp2k5hvfchaafxmbajcoqfi"
topics: ["534527562705/wog3wai35vf3tgxehzrho3kdga/postedMess…02cadae2890d3c30e272230322b361d38d21268c5c99b2b80"]
url: "wss://a307bjgfbycsj5-ats.iot.us-east-1.amazonaws.com/mqtt?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAS3UEXNWQVC7VBUYW%2F20190705%2Fus-east-1%2Fiotdevicegateway%2Faws4_request&X-Amz-Date=20190705T215536Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=383fed2e3e9df8d53f545bae8991ac8cc497918ae90d101290d69cc75a8a973c&X-Amz-Security-Token=AgoJb3JpZ2luX2VjEMb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJHMEUCICcf69zsU2uq4wdLCXtunExOvRUPy1PZEcuhbarOHQS8AiEAtG4z413Odhrv5Vr8vE78Cmx2G0tJAiA3EXQdtD8WHf0q%2FAMIHxABGgwxOTY3NzMxMTMyNDkiDHwJIpkOnfX6SbWf9irZAwP7ApoQf7KqHyEiIJsvBdoLZDEcYbGBg1h2N2Hk%2BnnMXwzg4vA6mptzNrwLHUOYcWCcjmcG6f0lHUIxMdcPIIdaLd6%2BvqcEl3B%2B%2BDUqIJWWK1MoLzOcEO3rmThuAhU1akg16xS6gACahSfvrCL6Xre1DBeglvQX69%2FYesAdBtHCDg08hYg3bjxuWmw2MK2jzgDFnlY2fov5zIc0G%2FiQrhFgOFCCyHwh3u%2FIXz1Oi1qZx%2F1yGjZE5UKG1Ksoar4jg2lHHQ5M8oxu74VWLoSs1tB9o1Ex50eLqn%2BBe821D7kCbg86hPKdQ109Lq%2BvosOq0fFdg4atUD4f%2F%2FAW2scnjV8s%2BNs2HlR1jCuUbZll3HwNKOeQwK8XJWsBjAI7eKSFivyJ%2B29QZHyqT%2F8F4G1qttbLpnKjoLLLNQRZ6y31kIE%2FsYa107VhMoxkRRpBl55kvU4KF0aoyNbYj5q4sYTc0ldMgs4fvGvXHc5hWv0ERcQ260lIF2O90rqwZcNgIjCtX1M1B%2FQdBcq7POyc23CH9WzAogxNSUWOCmV0Wd%2BWE4%2BN9H40FWMCjZO4QPWXejXnlzwrMrsAjdn1Zh4tHqDItcCdmNhOvgpPUNmczsIxmBRsgnGLnDZsQqX9MNiO%2F%2BgFOrQBAyptNPG6V65CDeboZaueAzoahpVhupdFEGxUTQq86Tu1l3Y%2BxyenEgY93qWobbevcp%2B5j63ciPNEAepn%2FUBrUtBblbEiyzF84CK40aQnGrWapmG5A1zR5qLcBPUh8fFNI3W2nXifoi%2F%2BOr%2BXnp69xB1F60L6yVrd7meVOD8P55hHggbylxgIA8YlpdUnqoFky1HfHHYAJKJUzYKAIE8WPOiKopYrO6TSP3X0xREPLS3nWWD0"
__proto__: Object
length: 1
__proto__: Array(0)
```

**_Responses received in browser after connecting to subscription, _connack_, and subscribing to topic, _suback__**

```
e.exports {cmd: "connack", retain: false, qos: 0, dup: false, length: 2, …}
cmd: "connack"
dup: false
length: 2
payload: null
qos: 0
retain: false
returnCode: 0
sessionPresent: false
topic: null
__proto__: Object

e.exports {cmd: "suback", retain: false, qos: 0, dup: false, length: 3, …}
cmd: "suback"
dup: false
granted: [0]
length: 3
messageId: 37880
payload: null
qos: 0
retain: false
topic: null
__proto__: Object
```

Answer

Using Amplify I'm able to receive subscription updates, but not if I use arguments.

```
    Amplify.configure({
      API: {
        graphql_endpoint: 'https://mygraphqlendpoint.com',
        graphql_headers: async () => ({
          SessionId: localStorage.getItem('sessionId')
        })
      }
    })
...
  // this is working. I changed my original schema to allow subscription with no arguments
  const subscription = API.graphql(
      graphqlOperation(
        `subscription PostedMessage {
        postedMessage{id, CreateTime, message, author}
      }`
      )
    ).subscribe({
      next: todoData => console.log(todoData)
    })
  // this is not working
  var groupId = this.props.group.id
  const subscriptionWithArgs = API.graphql(
      graphqlOperation(
        `subscription PostedMessage($groupId: ID) {
        postedMessage(groupId: $groupId){id, CreateTime, message, author}
      }`,
        { groupId: groupId }
      )
    ).subscribe({
      next: todoData => console.log(todoData)
    })
```

Answer

The subscription with arguments is now working, by adding _groupId_ to the response of my postMessage mutation.

```
var query = `mutation PostMessage($groupId: ID!, $message: String!) {
  postMessage(groupId: $groupId, message: $message){id, CreateTime, message, author, groupId}
}`
```

Answer

Just putting this note here in case somebody is working on this.

```
As of January 1, 2022, MQTT over WebSockets is no longer available as a protocol for GraphQL subscriptions in AWS AppSync APIs. Pure WebSockets is the only protocol supported in AWS AppSync
```
.
https://docs.aws.amazon.com/appsync/latest/devguide/aws-appsync-real-time-data.html

Appsync Subscription through browser (ReactJS and MQTT.js)

Relevanter Inhalt