React Native AWSAppSyncRealTimeProvider Connection Handshake Error

[Dellybro]

Describe the bug When attempting to subscribe to a graphql subscription I get an error about the connection handshake

BUG OCCURS: This bug occurs on the @latest version of AWS-Amplify 3.0.22 and aws-amplify-react-native 4.2.3

BUG DOES NOT OCCUR: Upon downgrading to versions 1.1.26 and 2.1.12, i am able to use the subscription without any connection errors

I would like to use the latest aws amplify version especially when launching to production soon, but with this bug it doesn't seem like that would be possible.

To Reproduce Steps to reproduce the behavior:

1. Fresh install of react native
2. Subscribe to a graphql endpoint on a cloudfront url such as https://graphl.my-website.com/graphql

Expected behavior

I would expect to not get any errors and receive data after making updates to the data i'm subscribed to.

Code Snippet Please provide a code snippet or a link to sample code of the issue you are experiencing to help us reproduce the issue. (Be sure to remove any sensitive data)

function handleSubscription() {
        subscription?.unsubscribe?.();

        const sub = API.graphql(graphqlOperation(subscribeToJobOrderChanges, { id: jobOrder.pk })).subscribe({
            next: (response) => {
                if (response.value.data.subscribeToJobOrderChanges)
                    setJobOrder(response.value.data.subscribeToJobOrderChanges);
            },
            error: (error) => {
                console.log('Error handling subscription', error);
            },
        });

        setSubscription(sub);
    }

import { jobParams } from '../parameters';

subscribeToJobOrderChanges = `
    subscription SubscribeToJobOrderChanges($id: ID!) {
        subscribeToJobOrderChanges(pk: $id) {
            ${jobParams}
        }
    }
`;

Screenshots If applicable, add screenshots to help explain your problem.

One screen shot contains version of working verse not work (left is working verion, right is not working version of amplify), the other screen shot is of the error i get back from the error listener

What is Configured? If applicable, please provide what is configured for Amplify CLI:

• Which steps did you follow via Amplify CLI when configuring your resources.

• Which resources do you have configured?

  const awsmobile = {
  Auth: {
  identityPoolId: 'us-west-2:6d1e718e-1ce5-4a3b-8288-xxxxx',
  userPoolId: 'us-west-2_xxxxx',
  userPoolWebClientId: '26se3n6qrlgmo803n7xxxxxx',
  
  region: 'us-west-2',
  },
  Storage: {
  AWSS3: {
    bucket: 'xxxx-development-xxxxx-2k9lmsrbhpph',
    region: 'us-west-2',
  },
  },
  API: {
  endpoints: [
    {
      name: 'xxxx-API',
      endpoint: 'https://dev.gateway.xxxx.com',
      region: 'us-west-2',
    },
  ],
  },
  aws_appsync_graphqlEndpoint: 'https://dev.graph.xxxx.com/graphql',
  aws_appsync_region: 'us-west-2',
  aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',
  };

  
  npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages

System: OS: macOS 10.15.5 CPU: (8) x64 Intel(R) Core(TM) i7-3770 CPU @ 3.40GHz Memory: 1.57 GB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 8.15.1 - /usr/local/bin/node npm: 6.13.7 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Browsers: Chrome: 84.0.4147.105 Firefox: 69.0.3 Safari: 13.1.1 npmPackages: @babel/core: 7.10.5 => 7.10.5 @babel/runtime: 7.10.5 => 7.10.5 @fyresite/ysod-calculate-cost: 1.0.1 @react-native-community/async-storage: ^1.11.0 => 1.11.0 @react-native-community/eslint-config: 1.1.0 => 1.1.0 @react-native-community/geolocation: ^2.0.2 => 2.0.2 @react-native-community/masked-view: ^0.1.10 => 0.1.10 @react-native-community/netinfo: ^5.9.5 => 5.9.5 @react-navigation/drawer: ^5.8.7 => 5.8.7 @react-navigation/native: ^5.7.2 => 5.7.2 @react-navigation/stack: ^5.8.0 => 5.8.0 amazon-cognito-identity-js: ^4.3.3 => 4.3.3 aws-amplify: ^1.1.26 => 1.3.3 aws-amplify-react-native: ^2.1.12 => 2.3.3 babel-jest: 25.5.1 => 25.5.1 creditcardutils: ^1.0.0 => 1.0.0 dayjs: ^1.8.31 => 1.8.31 eslint: 6.8.0 => 6.8.0 form-urlencoded: ^4.2.1 => 4.2.1 husky: ^4.2.5 => 4.2.5 jest: 25.5.4 => 25.5.4 jetifier: ^1.6.6 => 1.6.6 lint-staged: ^10.2.11 => 10.2.11 lodash: ^4.17.19 => 4.17.19 metro-react-native-babel-preset: 0.59.0 => 0.59.0 native-base: ^2.13.13 => 2.13.13 phone: ^2.4.14 => 2.4.14 prettier: ^2.0.5 => 2.0.5 react: 16.13.1 => 16.13.1 react-native: 0.63.2 => 0.63.2 react-native-animated-background-color-view: ^1.3.0 => 1.3.0 react-native-config: ^1.3.2 => 1.3.2 react-native-firebase: ^5.6.0 => 5.6.0 react-native-geocoder: ^0.5.0 => 0.5.0 react-native-gesture-handler: ^1.7.0 => 1.7.0 react-native-image-picker: ^2.3.3 => 2.3.3 react-native-image-progress: ^1.1.1 => 1.1.1 react-native-keyboard-aware-scroll-view: ^0.9.1 => 0.9.2 react-native-keyboard-aware-scrollview: ^2.1.0 => 2.1.0 react-native-lightbox: ^0.8.1 => 0.8.1 react-native-linear-gradient: ^2.5.6 => 2.5.6 react-native-maps: ^0.27.1 => 0.27.1 react-native-permissions: ^2.1.5 => 2.1.5 react-native-picker-select: ^7.0.0 => 7.0.0 react-native-progress: ^4.1.2 => 4.1.2 react-native-reanimated: ^1.10.1 => 1.10.1 react-native-safe-area-context: ^3.1.1 => 3.1.1 react-native-screens: ^2.9.0 => 2.9.0 react-native-vector-icons: ^7.0.0 => 7.0.0 react-redux: ^7.2.1 => 7.2.1 react-test-renderer: 16.13.1 => 16.13.1 redux: ^4.0.5 => 4.0.5 redux-persist: ^6.0.0 => 6.0.0 redux-thunk: ^2.3.0 => 2.3.0 tipsi-stripe: ^7.5.3 => 7.5.3 uuid: ^8.3.0 => 8.3.0 validator: ^13.1.1 => 13.1.1 npmGlobalPackages: @fyresite/mysql-data-api: 0.1.5 extract-text-webpack-plugin: 3.0.2 mysql2: 1.6.5 nodemon: 1.19.1 npm: 6.13.7 react-native-cli: 2.0.1 sequelize-cli: 5.5.0 sequelize: 0.0.0-development typescript: 3.7.5

</details>

**Smartphone (please complete the following information):**

- Device: iPhone 6, xCode simulator (iPhone 11), Android X
- OS: iOS 13+

[abel30567]

I am facing this issue as well. As a workaround I replaced graphql endpoint on a cloudfront url (https://graphl.my-website.com/graphql) with the appsync url (https://xxxxxxxxxxxx.appsync-api.region.amazonaws.com/graphql) and the subscription started working

[Dellybro]

Ye actually that's what i ended up having to do, i guess a cloudfront URL doesn't work for a handshake anymore.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.