TypeError: Cannot read property 'items' of undefined inside API react Connect component

** Which Category is your question related to? ** API

** What AWS Services are you utilizing? ** API (GraphQL AppSync) Auth

** Provide additional details e.g. code snippets ** Error:

My App.js:

import React, { Component } from 'react';
import './App.css';
import Amplify, { graphqlOperation }  from "aws-amplify";
import { Connect } from "aws-amplify-react";
import awsmobile from './aws-exports';
Amplify.configure(awsmobile)

class App extends Component {
  render() {
    const ListView = ({ companies }) => (
      <div>
        <h3>All companies</h3>
        <ul>
            {companies.map(company => <li key={company.id}>{company.name} ({company.id})</li>)}
        </ul>
      </div>
    );

    const ListCompanys = `query ListCompanys {
      listCompanys {
        items {
          id
          name
        }
      }
    }`;

    return (
      <div className="App">
        <Connect query={graphqlOperation(ListCompanys)}>
          {({ data: { listCompanys } }) => (
              <ListView companies={listCompanys.items} />
          )}
        </Connect>
      </div>
    );
  }
}

export default App;

[lazydragon]

I am having similar issues, the same query succeed with API.graphql call directly, but fail with Connect.

[github-actions[bot]]

This issue has been automatically locked since there hasn’t been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.