Aws-mobile-appsync-sdk-js: Unhandled Rejection (TypeError): Cannot read property 'hydrated' of undefined

[amirmishani]

Do you want to request a feature or report a bug?
bug
What is the current behavior?
creates the following error on screen in react app.
Unhandled Rejection (TypeError): Cannot read property 'hydrated' of undefined
If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
I was following your own tutorial here. On the second step as soon as you setup the react app it fails.

import AWSAppSyncClient, { buildSubscription } from 'aws-appsync';
import { Rehydrated, graphqlMutation } from 'aws-appsync-react';
import awsmobile from './aws-exports';
import { ApolloProvider } from 'react-apollo';

class App extends React.Component {
  render() {
    return <div className="App">Hello World</div>;
  }
}

const client = new AWSAppSyncClient({
  url: awsmobile.aws_appsync_graphqlEndpoint,
  region: awsmobile.aws_appsync_region,
  auth: {
    type: awsmobile.aws_appsync_authenticationType,
    apiKey: awsmobile.aws_appsync_apiKey
  }
});

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <App />
    </Rehydrated>
  </ApolloProvider>
);

export default WithProvider;

What is the expected behavior?
Expecting the react app to load.

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?
This is on a desktop Chrome (latest) but the error seems to be independent of browser and OS.

[jrounsav]

Tmp workaround

This was intermittent for my team. We added the following to a wrapper component and remounted the apollo provider after a timeout if the app did not hydrate

return (
        <ApolloProvider client={this.props.client}>
          <Rehydrated
            render={({ rehydrated }) => {
              if (rehydrated) {
                this.clear = true;
                return this.props.children;
              } else {
                return <View style={{ flex: 1 }} />;
              }
            }}
          />
        </ApolloProvider>
      );

[elorzafe]

@amirmishani are you using react-apollo version 3.x.x? You should use 2.x.x (is a peer dependency of aws-appsync-react)

Related to https://github.com/aws-samples/aws-serverless-appsync-app/issues/8

[matthamil]

@elorzafe are there any plans to upgrade the version of react-apollo? FWIW this ticket also relates to https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/436

[norby3]

@amirmishani are you using react-apollo version 3.x.x? You should use 2.x.x (is a peer dependency of aws-appsync-react)

@amirmishani the comment by @elorzafe helped me get further along in the grind... [email protected] was the key - b/c by default it will use the 3.x version and causes a cascade of other dependency probs

for a react-native app i used something along the lines of:
yarn add [email protected] aws-appsync aws-appsync-react @react-native-community/netinfo
yarn add apollo-client react-dom graphql

aws-appsync and aws-appsync-react were recently bumped to 2.x

i had to change my mindset to pay a lot more attention to the dependencies and the versions - can't expect it to just work - can't expect yarn to just figure it out

[Ashish-Nanda]

@amirmishani did using react-apollo 2.x.x resolve your issue?

[norby3]

there is no open-source-goddess ensuring all the node packages place nice together

Back with another update on the witches brew of packages:
react-apollo needs to be 2.5.8 - previously i had 2.5.7 but that caused error msg:

_this.queryObservable.resetQueryStoreErrors is not a function

    "@react-native-community/netinfo": "^4.2.1",
    "apollo-client": "^2.6.4",
    "aws-appsync": "^2.0.0",
    "aws-appsync-react": "^2.0.0",
    "graphql": "^14.5.4",
    "graphql-tag": "^2.10.1",
    "react": "16.8.6",
    "react-apollo": "2.5.8",
    "react-dom": "^16.9.0",
    "react-native": "0.60.5",

with the above combination, was able to get first evidence that graphql query worked via appsync - console.log output showing test data from my graphql schema model called "cases":

Home.js this.props.cases = [{"uuid":"5b9LAkRITSWsGX74aYPkycnj3BEptJZ0","caseType":"Hello, world!","caseVersion":"Hello, world!","status":"Hello, world!","createdAt":"1970-01-01T12:30:00.000Z" ...

another thing is that i'm using the old school high order component (HOC) style and not the swanky new hooks - someday way in the future maybe i'll be sexy and use hooks but after weeks of grinding on this react-native-0.60-appsync-2.0-graphql-apollo app, happy there are signs that the old school way is functioning

my takeaway is pay very close attention to your packages & versions - none of 'my' code was wrong or broken - all along it was just the wrong combination of node packages - there is no open-source-goddess ensuring all the node packages place nice together - like sherlock we have to piece it together thru helpful msg boards like this and helpful peeps like @Ashish5591 - ciao for now

[amirmishani]

@elorzafe and everybody else who mentioned that react-apollo version needs to be 2.x.x are correct! That did solve the issue.

[Khrystyna]

@amirmishani Will be there an update on this issue? It's sad to jump one major version down (Apollo client is now 3.7).

[cayblood]

I agree. Would like to be able to use the latest client with modern use syntax for React.

[keisukekomeda]

related to #448

[harshshredding]

For people like me who look for stuff to copy paste.
npm intall [email protected]

[arniesaha]

[email protected] works like everyone stated above. Thanks