amplify-js: Subscription returning null in app, works on AppSync console

Before opening, please confirm:

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

JavaScript Framework

React Native

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

# Put output below this line
  System:
    OS: macOS High Sierra 10.13.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 791.81 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.3 - /usr/local/bin/node
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Firefox: 88.0.1
    Safari: 13.1.2
  npmPackages:
    @babel/core: ^7.9.0 => 7.9.0 
    @iconify-icons/ion: ^1.1.2 => 1.1.2 
    @iconify/react: ^1.1.4 => 1.1.4 
    @react-native-async-storage/async-storage: ^1.15.7 => 1.15.7 
    @react-native-community/async-storage: ^1.12.1 => 1.12.1 
    @react-native-community/eslint-config:  1.1.0 
    @react-native-community/eslint-plugin:  1.0.0 
    @react-native-community/masked-view: ^0.1.10 => 0.1.10 
    @react-native-community/netinfo: ^6.0.1 => 6.0.1 
    @react-navigation/bottom-tabs: ^5.11.11 => 5.11.11 
    @react-navigation/native: ^5.9.4 => 5.9.4 
    HelloWorld:  0.0.1 
    aws-amplify: ^4.2.4 => 4.2.4 
    aws-amplify-react-native: ^5.0.3 => 5.0.3 
    babel-plugin-inline-view-configs:  0.0.5 
    expo: ~41.0.1 => 41.0.1 
    expo-status-bar: ~1.0.4 => 1.0.4 
    hermes-inspector-msggen:  1.0.0 
    react: 16.13.1 => 16.13.1 
    react-animated:  0.1.0 
    react-dom: 16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz => 0.63.2 
    react-native-codegen:  0.0.2 
    react-native-gesture-handler: ^1.10.3 => 1.10.3 
    react-native-reanimated: ^2.1.0 => 2.1.0 
    react-native-safe-area-context: ^3.2.0 => 3.2.0 
    react-native-screens: ^3.0.0 => 3.0.0 
    react-native-web: ~0.13.12 => 0.13.18 
  npmGlobalPackages:
    @aws-amplify/cli: 5.3.1
    @calblueprint/whales: 0.1.9
    expo-cli: 4.7.3
    npm: 6.14.13

Describe the bug

The bug we are seeing seems to be same as the one described in https://github.com/aws-amplify/amplify-js/issues/4832, however the solution that was provided did not work for us.

We are building a ReactNative app, using AppSync mutations and subscriptions, and using the Amplify API. We have tested the subscriptions in the AppSync console, and it is successfully returns a correct response when we fire the corresponding mutation. When we call the same subscription in JS, the response we get is null. This is true for both our custom mutation/subscriptions and the ones that were autogenerated for us.

Expected behavior

Return all the requested data.

Reproduction steps

1. Set up AppSync from scratch a. Schema:

type Mutation {
	addItem(one: String, two: String, three: String): info
}

type Query {
	getInfo(one: String!, two: String!): info
}

type Subscription {
	onAddInfo(one: String, two: String, three: String): info
		@aws_subscribe(mutations: ["addItem"])
}

type info {
	one: String
	two: String
	three: String
}

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

b. Create a NoneType data source c. Create resolver for mutation to the NoneType data source Request mapping:

{
    "version": "2017-02-28",
    "payload": $util.toJson($context.args)
}

Response mapping:

$util.toJson($context.result)

1. Test in console to see if it displays correctly (subscription)
2. Create React Native project, integrate AppSync API with the app with amplify, run the subscription, and test with a mutation from the console.
3. See console prints

Code Snippet

// Put your code below this line.
  async function fetchItems() {
    try {
      const todoData = await API.graphql(graphqlOperation(onAddInfo)).subscribe({
        next: subOnAddItem => {
          console.log(subOnAddItem.value) // should return null for the onAddItem field
  
          // should return TypeError: null is not an object
          setItems(items => [
            ...items,
            [
                subOnAddItem.value.data.onAddItem.one
            ]
          ]);
        },
        error: error => console.warn(error)
      });
    } catch (err) { console.log(err) }
  }

Log output

// Put your logs below this line
Object {
  "data": Object {
    "onAddItem": null,
  },
}

TypeError: null is not an object (evaluating 'subOnAddItem.value.data.onAddItem.one')
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue

aws-exports.js

const awsmobile = {
    "aws_project_region": "us-west-2",
    "aws_appsync_graphqlEndpoint": "https://XXX.appsync-api.us-west-2.amazonaws.com/graphql",
    "aws_appsync_region": "us-west-2",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "XXX"
};


export default awsmobile;

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