TypeError: undefined не является объектом (оценивает '_props.listMessagesQuery.listMessages') в ReactNative

Я новичок в response-native и aws appsync. Мы пытаемся отобразить список сообщений, но когда я запускаю react-native run-android, он выдает ошибку, говоря

TypeError: undefined is not an object(evaluating '_props.listMessagesQuery.listMessages')

[Ниже приведен URL-адрес скриншота с ошибкой] https://i.stack.imgur.com/b1Wlj.png

Chat.js

import React,{Component} from 'react';
import ChatInput from './ChatInput';
import ChatMessages from './ChatMessages';
import { graphql, compose } from 'react-apollo';
import listMessages from './querys/listMessages';
import createMessage from './querys/createMessage';
import gql from 'graphql-tag';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    scrollIntoView
  } from 'react-native';

class Chat extends Component {

  state = {
    message: '',
  }

    render() {
      return (
        <View className='Chat'>
          <ChatMessages
            messages = {this.props.listMessagesQuery.listMessages || []}
            endRef = {this._endRef}
          />
          <ChatInput
            message = {this.state.message}
            onTextInput = {(message) => this.setState({message})}
            onResetText = {() => this.setState({message: ''})}
            onSend = {this._onSend}
          />
        </View>
      );
    }

    _onSend = () => {
      //console.info(`Send: ${this.state.message}`)
      this.props.createMessageMutation({
        variables: {
          text: this.state.message,
          sentById: this.props.userId
        }
      })
    }


    /*
     * AUTO SCROLLING
     */

    _endRef = (element) => {
      this.endRef = element
    }

    componentDidUpdate(prevProps) {
      // scroll down with every new message
      if (prevProps.listMessagesQuery.listMessages !== this.props.listMessagesQuery.listMessages && this.endRef) {
        this.endRef.scrollIntoView()
      }
    }

  }
export default compose(
    graphql(listMessages, {
        options: {
            fetchPolicy: 'cache-and-network'
        },
        props: (props) => ({
            posts: props.listMessagesQuery.listMessages && props.listMessagesQuery.listMessages.Message,
        })
    }))(Chat)

App.js

import React,{ Component} from 'react';
import * as AWS from 'aws-sdk';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import gql  from 'graphql-tag';
import { graphql,compose} from 'react-apollo';
import generateStupidName from 'sillyname';
import localStorage from 'react-native-sync-localstorage';
import Chat from './Chat';
import { Async } from 'react-async-await';
import createPerson from './querys/createPerson';

const CHAT_USER_NAME_KEY = 'CHAT_USER_NAME'
const CHAT_USER_ID_KEY = 'CHAT_USER_ID'

class App extends Component {
    async componentDidMount() {
      let name = localStorage.getItem(CHAT_USER_NAME_KEY)
      if (!name) {
                name = generateStupidName()
                const result = await this.props.createPersonMutation({
                  variables: { name }
             })
        localStorage.setItem(CHAT_USER_NAME_KEY, result.data.createPerson.name);
        localStorage.setItem(CHAT_USER_ID_KEY, result.data.createPerson.id);
      }
    }
  render() {
    const name = localStorage.getItem(CHAT_USER_NAME_KEY)
    const userId = localStorage.getItem(CHAT_USER_ID_KEY)
    return (
      <View style = {styles.container}>
         <Chat name = {name} userId = {userId} />
      </View>
    );
  }
}
// const createPerson =gql`
// mutation createPerson($name:String!){
//   createPerson(input :{
//     name : $name
//   }){
//     id
//     name
//   }
// }
// `
// export default graphql(createPerson,{name:'createPersonMutation'})(App)
export default compose(
  graphql(createPerson, {name:'createPersonMutation'}))(App)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Я не понимаю эту ошибку Пожалуйста, помогите мне. Спасибо! заранее