title: Proper way to setup AWSAppSyncClient, Apollo & React
body: <p>I've been having issues getting started with React, Apollo, and AWS-AppSync. I can't resolve this error message:</p>
  
  <pre><code>TypeError: this.currentObservable.query.getCurrentResult is not a function
  </code></pre>
  
  <p>I'm using the updated packages of @apollo/react-hooks and aws-appsync.</p>
  
  <p>My current setup looks like this.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  
  import config from './aws-exports';
  import AWSAppSyncClient from 'aws-appsync';
  import { ApolloProvider } from '@apollo/react-hooks';
  
  const client = new AWSAppSyncClient({
      url: config.aws_appsync_graphqlEndpoint,
      region: config.aws_appsync_region,
      auth: {
          type: config.aws_appsync_authenticationType,
          apiKey: config.aws_appsync_apiKey
      }
  });
  
  ReactDOM.render(
      &lt;ApolloProvider client={client}&gt;
          &lt;React.StrictMode&gt;
              &lt;App /&gt;
          &lt;/React.StrictMode&gt;
      &lt;/ApolloProvider&gt;,
      document.getElementById('root')
  );
  </code></pre>
  
  <p>And I have a function that makes a query that looks like this:</p>
  
  <pre><code>import React from 'react';
  import { useQuery } from '@apollo/react-hooks';
  import gql from 'graphql-tag';
  
  const Flavors = () =&gt; {
  
      const GET_FLAVORS = gql`
          query listAll {
              items {
                  name,
                  image
              }
          }
      `;
  
      const { loading, error, data } = useQuery(GET_FLAVORS);
  
      if(loading) return &lt;p&gt;loading...&lt;/p&gt;
      if(error) return &lt;p&gt;Something went wrong...&lt;/p&gt;
  
      return (
          &lt;div&gt;
          {
              data.listIceCreamTypes.items.map(type =&gt; {
                  return &lt;div key={type.name}&gt;
                      &lt;img src={type.image} alt={type.name} /&gt;
                      &lt;h1&gt;{type.name}&lt;/h1&gt;
                  &lt;/div&gt;
              })
          }
          &lt;/div&gt;
      )
  }
  
  export default Flavors;
  </code></pre>
  
  <p>I've gone through various solutions described in <a href="https://github.com/apollographql/react-apollo/issues/3148" rel="noreferrer">https://github.com/apollographql/react-apollo/issues/3148</a> such as adding:</p>
  
  <pre><code>"resolutions": {
      "apollo-client": "2.6.3"
   }
  </code></pre>
  
  <p>to package.json. Then re-running npm install and restarting the server.</p>
  
  <p>Nothing seems to solve my issues.</p>
  
  <p>Edit** Here's a repo to reproduce the problem: <a href="https://github.com/Rynebenson/IceCreamQL" rel="noreferrer">https://github.com/Rynebenson/IceCreamQL</a></p>