Android gives "[Error: Network error: Requested keys of a value that is not an object.]"

[lcrodriguez]

I'm trying a basic app with AppSync on Android phone and emulators and graphl query is not working properly while it works fine on iOs mobile.

The following error appears when executing it:

[Error: Network error: Requested keys of a value that is not an object.]

Can someone guide me on this error?

    AllTakes: graphql(AllTakes, {
        options: {
            fetchPolicy: 'cache-and-network'
        },
        props: ({data}) => {
            console.log(data)
            return {
                loading: data.loading,
                takes: data.takes
            }
        }
    })

const AllTakesResponse = compose(
  AllTakes
)(Home);

[vonkanehoffen]

Also having this problem with a React Native project built with CRNA. Strange that when I attempt to debug it with the "Debug JS Remotely" option, the error no longer appears and everything works as expected. Did you see that behaviour too?

[lcrodriguez]

Yes, that happened to me too. I was about to try a published apk release to see if this happens as it's a bit blocker for us if it breaks on production.

[oxbits]

I have been stuck on this issue too. My app works on ios, but both Android device & emulator are giving me the same error.

[vonkanehoffen]

Yep... still stuck. I decided to create a new app to test this in it's simplest form & eliminate other possibilities. This still gets the same error:

import React from 'react';
import { Text, View } from 'react-native';
import aws_exports from './aws-exports';
import AWSAppSyncClient from 'aws-appsync';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import { ApolloProvider } from 'react-apollo';
import { Rehydrated } from 'aws-appsync-react'

export const client = new AWSAppSyncClient({
  url: aws_exports.aws_appsync_graphqlEndpoint,
  region: aws_exports.aws_appsync_region,
  auth: {
    type: AUTH_TYPE.API_KEY,
    apiKey: 'api_key_here',
  },
})

const listAll = gql`
  query listAll {
    listFolds{
      items {
        title
      }
    }
  }
`

export default class App extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Rehydrated>
          <Query query={listAll}>
            {({ data, loading, error, refetch}) => {
              return (
                <View>
                  <Text>Response: {JSON.stringify({data, error}, null, 2)}</Text>
                </View>
              )
            }}
          </Query>
        </Rehydrated>
      </ApolloProvider>
    );
  }
}

package versions:

"devDependencies": {
    "jest-expo": "~27.0.0",
    "react-native-scripts": "1.14.0",
    "react-test-renderer": "16.3.1"
  },
...
"dependencies": {
    "apollo-client": "^2.3.8",
    "aws-appsync": "^1.3.3",
    "aws-appsync-react": "^1.1.3",
    "expo": "^27.0.1",
    "graphql": "^0.13.2",
    "graphql-tag": "^2.9.2",
    "react": "16.3.1",
    "react-apollo": "^2.1.11",
    "react-native": "~0.55.2"
  }

If I swap out AWSAppSyncClient for the latest apollo-boost client like:

import ApolloClient from 'apollo-boost'

export const client = new ApolloClient({
  uri: aws_exports.aws_appsync_graphqlEndpoint,
  request: async (operation) => {
    operation.setContext({
      headers: {
        'X-Api-Key': 'api_key_here',
      }
    })
  }
})

the error goes away. Not much use when I want to do auth via IAM, not temporary API keys though....

[vonkanehoffen]

Aha. Downgrading to "aws-appsync": "1.3.2", seems to fix this for now :-)

[manueliglesias]

Hi,

222 should address this

[lcrodriguez]

Thanks! Downgrading worked. We will try the fix soon.

[chroth7]

Hi - I had a similar problem & was able to fix it locally by changing the source. Android was treating the Object.keys(strings) differently, which killed some of the mutations I tried.

I tried a PR, maybe it is helpful

https://github.com/awslabs/aws-mobile-appsync-sdk-js/pull/229

[vonkanehoffen]

@manueliglesias I think there's still an issue here... I tried upgrading aws-appsync 1.3.2 -> 1.3.4 and in my CRNA app I get an "Expo has stopped" error with no further debug info when running a mutation. Downgrading again and restarting the bundler fixes it. This is my repo if you want a look: https://github.com/vonkanehoffen/FoldReactNative2

[tarunmehta-quovantis]

I have downgraded to 1.3.2 even it is not working on android. its working fine on iOS @vonkanehoffen, @chroth7 if you can help me.

Below is my code

App.js

`import React, {Component, Fragment} from 'react'; import {Text, View} from 'react' import { Provider } from "mobx-react"; import Amplify, { Auth } from 'aws-amplify' import awsConfig from './aws-exports'; import { stores } from "./src/Stores";

import AWSAppSyncClient from 'aws-appsync'; import { Rehydrated } from 'aws-appsync-react'; import { ApolloProvider, withApollo } from 'react-apollo';

import { AppNav } from './src/navigation.js'; import {Splash} from './'

Amplify.configure(awsConfig);

const appsyncClient = new AWSAppSyncClient({ url: awsConfig.API.aws_appsync_graphqlEndpoint, region: awsConfig.API.aws_appsync_region, auth: { type: 'AMAZON_COGNITO_USER_POOLS', jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(), } })

const AppWithClient = withApollo(AppNav)

export default class App extends Component { render() { return (

)

} }

console.disableYellowBox = true`

package.json

{ "name": Abc, "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "aws-amplify": "^1.0.11", "aws-amplify-react": "^2.0.1", "aws-amplify-react-native": "^2.0.1", "aws-appsync": "^1.3.2", "aws-appsync-react": "^1.1.4", "aws-sdk": "^2.353.0", "d3-shape": "^1.2.2", "es6-symbol": "^3.1.1", "google-libphonenumber": "^3.1.14", "graphql-tag": "^2.10.0", "i": "^0.3.6", "mobx": "^4.5.2", "mobx-react": "^5.4.2", "moment": "^2.22.2", "moment-range": "^4.0.1", "npm": "^6.4.1", "prop-types": "^15.6.2", "react": "16.5.0", "react-apollo": "^2.2.4", "react-art": "^16.6.0", "react-native": "^0.57.4", "react-native-chart-kit": "^1.1.9", "react-native-circular-progress": "^1.0.1", "react-native-elements": "^1.0.0-beta6", "react-native-i18n": "^2.0.15", "react-native-keyboard-aware-scroll-view": "^0.7.2", "react-native-linear-gradient": "^2.4.2", "react-native-multiple-picker": "0.0.21", "react-native-parallax-header": "^1.0.6", "react-native-phone-input": "^0.2.1", "react-native-popup-dialog": "^0.16.3", "react-native-progress": "^3.5.0", "react-native-progress-circle": "^2.0.1", "react-native-segmented-control-tab": "^3.3.1", "react-native-simple-dialogs": "^0.4.1", "react-native-slider": "^0.11.0", "react-native-svg": "^6.4.1", "react-native-svg-charts": "^5.2.0", "react-native-triangle": "0.0.9", "react-native-vector-icons": "^6.1.0", "react-native-video": "^4.0.1", "react-navigation": "^2.14.2", "rn-viewpager": "^1.2.9", "save": "^2.3.3" }, "devDependencies": { "@babel/plugin-proposal-decorators": "^7.1.2", "@babel/runtime": "^7.1.2", "babel-jest": "23.6.0", "eslint-config-rallycoding": "^3.2.0", "jest": "23.6.0", "metro-react-native-babel-preset": "^0.48.3", "react-test-renderer": "16.5.0" }, "jest": { "preset": "react-native" }, "rnpm": { "assets": [ "./assets/fonts/" ] } }