Amplify-js: Amplify React Connect is not working.

[rygo6]

I am going through the tutorial here:
https://aws-amplify.github.io/amplify-js/media/api_guide

And this line

            <Connect query={graphqlOperation(ListEvents)}>
                {({ data: { listEvents } }) => (
                    <ListView events={listEvents.items} />
                )}
            </Connect>

I just cannot get to work. It keeps giving the error:
TypeError: Cannot read property 'items' of undefined

Everything is most definitely hooked up properly as I can run this:

        API.graphql(graphqlOperation(ListEvents)).then(function (result) {
            console.log(JSON.stringify(result, null, 2));
        });

And get a nice, correct, JSON in the browser console:

{
  "data": {
    "listEvents": {
      "items": [
        {
          "id": "a4dcd874-8d87-4ad0-898f-25b2e5d0241a",
          "name": "testname",
          "description": "testdescription"
        }
      ]
    }
  }
}

But that 'Connect' command in the react component just does not work for me at all.

Webstorm is reporting that it:
Cannot resolve symbol Connect
from this line:
import {Connect} from "aws-amplify-react";

I would figure thats pretty suspect. I did runt this command and it completely succesfully
npm install --save aws-amplify-react

What am I doing wrong?

[rygo6]

Also the exact syntax of whats ocurring with this method:

            <Connect query={graphqlOperation(ListEvents)}>
                {({ data: { listEvents } }) => (
                    <ListView events={listEvents.items} />
                )}
            </Connect>

really confuses me. Why so many {{ (( ? Is there more documentation on what exactly this is doing? I can't find it anywhere.

[rygo6]

OK I discovered the reason for this is initially the first time this chunk of code is evaluated 'data' object actually gets populated with this:
{"data":{},"errors":[],"loading":false}

Then after a few milliseconds it gets populated with the full JSON.

Is this correct? Or is this signifying something wrong?

If this is correct and how this works, whats the proper way to deal with this? To make it not try to access 'items' until the request has truly completed?

[rygo6]

Ok so for the purpose who comes flailing in after me on their react crash course. This is how you make it work:

                <Connect query={ graphqlOperation(ListEvents) }>
                    { ( { data: { listEvents } } ) =>
                        <div> {
                        listEvents ? (
                            <ListView events={listEvents.items}/>
                            ) : (
                            <h3> Loading </h3>
                        )} </div>
                    }
                </Connect>

That should be in the documentation.

[rygo6]

Leaving it open actually for that note to hopefully go in documentation.

[mikeRChambers610]

Hi I have a very similar issue. I have a few queries without variables that are exactly the same but are working fine. Now I am executing this query and getting "items" of undefined.

In the queries console I am getting the correct output for the group messages of the group where I provide the ID. Please let me know if you see anything wrong with the below :

graphql(ListGroupMessages, {
options: ({ props }) => ({
fetchPolicy: 'cache-and-network',
variables: {
groupID : "91555b01-20bb-400b-b39c-abc298a11f2c",
}
}),
props: props => {
return {
messages: props.data.listGroupMessages ? props.data.listGroupMessages.items : [],
}
}
})

[pungggi]

Leaving it open actually for that note to hopefully go in documentation.

The documentation actually seems to point to this indirectly by example,
in https://aws-amplify.github.io/docs/js/api#connect note line
```js
if (loading || !listTodos) return (

Loading...

[mlabieniec]

docs have been updated, please re-open on aws-amplify/docs if you feel there is still an issue with the update.

[ts-23]

This is normal null check with anything nothing to do with graphql.
You can just do

listEvents && listEvents.items.map