title: AmplifyJS error when Appsync subscribe is exposed via API Gateway
body: <p>Appsync is already replacing API Gateway to some extend, then why do you need to expose it via API Gateway. I know most people would be asking this question. Here is why?</p>
  
  <ol>
  <li>Support for Usage Plan</li>
  <li>Possibility of monetization.</li>
  </ol>
  
  <p>As far as I understood, Appsync is GrapQL + Apollo server implementation. The API exposed supports POST request. And even the subscription request is also a post request with Websocket MQTT (AWS IoT) URL as the response. (Eg provided below)</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "extensions": {
      "subscription": {
        "mqttConnections": [
          {
            "url": "wss://something-ats.iot.ap-northeast-1.amazonaws.com/mqtt?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Credential=...",
            "topics": [
              ".../.../subscribeToVehicleLocation/..."
            ],
            "client": "..."
          }
        ],
        "newSubscriptions": {
          "subscribeToVehicleLocation": {
            "topic": ".../../subscribeToVehicleLocation/..",
            "expireTime": null
          }
        }
      }
    },
    "data": {
      "subscribeToVehicleLocation": null
    }
  }
  </code></pre>
  
  <p>If that is the case, can we expose Appsyn endpoint via API-Gateway (POST Method)?</p>
  
  <p>For simplicity, I tried with <strong>HTTP API</strong> in API-Gateway. </p>
  
  <ul>
  <li>It worked well for <strong>Query</strong> &amp; <strong>Mutate</strong> Request. </li>
  <li><p>But for <strong>Subscribe</strong> request, I am getting a handshake exception. (Connection failed: Connection handshake error, in my angular amplify project)</p>
  
  <ol>
  <li><p>Is this the right way to expose Appsync via API-Gateway? Or should I use AWS Service (In API Gateway) to Invoke Appsync? </p></li>
  <li><p>How can I resolve this Websocket Connection handshake error in Angular Amplify Project?</p></li>
  </ol></li>
  </ul>
  
  <p><strong>PS:</strong></p>
  
  <p>I was previously able to subscribe to the data using the original Appsync URL (using AmplifyJS in Angular 7). With API-Gateway URL, I am getting this WS Handshake exception (with Amplify).</p>
  
  <pre class="lang-js prettyprint-override"><code>WebSocket connection to 'wss://....execute-api.ap-northeast-1.amazonaws.com/graphql?header=...&amp;payload=e30=' failed: Error during WebSocket handshake: Unexpected response code: 400
  
  in AWSAppSyncRealTimeProvider.js:603 
  </code></pre>
  
  <hr>
  
  <p><strong>Update 24-04-2020</strong></p>
  
  <p>I was able to invoke Appsync via AWS Service invoke in API-Gateway with the below settings. (Used REST Protocol provided by API Gateway) </p>
  
  <p>But still, I am having the Web Socket error in Amplify</p>
  
  <p><strong>API-Gateway Configuration</strong></p>
  
  <p><a href="https://i.stack.imgur.com/9Hbyz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Hbyz.png" alt="AWS API Gateway invoking AWS Service Appsync"></a></p>
  
  <p><strong>Note</strong>: AWS Subdomain, is the subdomain part of Appsync API Endpoint.</p>
  
  <p><strong>Trust relationship for IAM Role</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>{
    "Version": "2012-10-17",
    "Statement": [
      {
        "Effect": "Allow",
        "Principal": {
          "Service": [
            "appsync.amazonaws.com",
            "apigateway.amazonaws.com"
          ]
        },
        "Action": "sts:AssumeRole"
      }
    ]
  }
  </code></pre>
  
  <p><strong>IAM Role Permission</strong></p>
  
  <p><a href="https://i.stack.imgur.com/15bnF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/15bnF.png" alt="API Gateway execution role"></a></p>