CODEWITHSUNDEEP
graphqlaws-appsyncaws-amplify
Pinguin Dirk
Pinguin Dirk

Reputation: 1433

aws-amplify-react Connect returns undefined data first

I have the following setup:

and following this documentation: https://aws.github.io/aws-amplify/media/api_guide#connect

As in the doc, rendering this gives me 2x undefined data before returning the correct data. This breaks the app, as nested fields (in my example, e.g. getRoom.id) cannot be accessed.

Component example:

export const AppSyncTest = () => (
  <Connect query={graphqlOperation(query)}>
    {({ data: { getRoom } }) => {

      console.log(getRoom); // returns undefined 2x before data is there

      if (!getRoom) { // without this, app breaks
        return 'why? (can even happen if loading is false)';
      }

      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Welcome to IntelliFM WebApp</h1>
          </header>
          <p className="App-intro">
            Found room {getRoom.id} with label {getRoom.label} and description{' '}
            {getRoom.description}
          </p>
        </div>
      );
    }}
  </Connect>
);

Upvotes: 3

Views: 953

Answers (2)

jupiterjelly
jupiterjelly

Reputation: 405

See AWS API LINK

Relevant code snippet from above link:

<Connect query={graphqlOperation(queries.listTodos)}>
            {({ data: { listTodos }, loading, error }) => {
                if (error) return (<h3>Error</h3>);
                if (loading || !listTodos) return (<h3>Loading...</h3>);
                return (<ListView todos={listTodos.items} /> );
            }}
        </Connect>

Notice that the inside of the Connect component comes with not just 'data', but also 'error' and 'loading'. Since this is an asynchronous request, if you try to return data immediately, it will not be there, but if you do as the example above shows (assuming your request returns data of course), you should be good.

Upvotes: 1

KingBowen
KingBowen

Reputation: 240

I got the same issue, I think amplify is expecting developer to check if the response is Ready. I solved it by:

<Connect query={graphqlOperation(someAppSyncQuery)}>
  {this.test}
</Connect>


const test = (appSyncResponseObject: any): any => {
  if (appSyncResponseObject.data == null ||
      appSyncResponseObject.data.getRecords == null) {
      return null;
    } else {
      const records = appSyncResponseObject.data.getRecords;
      return (
        <div>
          <h3>List all records</h3>
          <ul>
            {records.map(
              (records) =>
                (<li key={records.uuid}>{records.context}</li>)
            )
            }
          </ul>
        </div>
      )
    }
}

Upvotes: 1

Related Questions