How to use ApolloProvider with withAuthenticator HOC

** Which Category is your question related to? ** Auth, API, aws-amplify-react HoCs

** What AWS Services are you utilizing? ** AppSync, Cognito, Amplify

** Provide additional details e.g. code snippets ** When I try to add the ApolloProvider to my React-based Amplify project, I am met with a slew of errors while trying to compose withAuthenticator with my own Higher Order Component.

This is probably a noob question, sorry if I’m doing something obviously wrong. (I assume a HoC can nest multiple layers?)

//App.js
/*** class App extends React.Component { ... } ***/ 

const withAppSyncProvider = (Comp) => {
  return class extends React.Component {
    render() {
      return (
      <ApolloProvider client={client}>
        <Rehydrated>
          <Comp />
        </Rehydrated>
      </ApolloProvider>
      );
    }
  }
}


export default withAuthenticator(withAppSyncProvider(App)); 

That code meets with this error:

index.js:1446 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:103.
    in _class (created by class_1)
    in class_1 (at src/index.js:12)

[haverchuck]

@jkeys-ecg-nmsu - When I use your import statements, I can reproduce the error.

I am pretty sure that the issue is that you’re trying to import Rehydrated from aws-amplify-react. Trying importing it from ‘aws-appsync-react’.

[haverchuck]

@jkeys-ecg-nmsu - We’re happy to leave this open! Please just keep us posted.

For what it’s worth, I used create-react-app as well on my working sample.