aws-ampify-react Connect сначала возвращает неопределенные данные

У меня следующая установка:

  • aws-ampify-реагировать
  • appsync
  • создать-реагировать-приложение

и следуя этой документации: https://aws.github.io/aws-amplify/media/api_guide#connect

Как и в документе, рендеринг дает мне 2x undefined данных перед возвратом правильных данных. Это нарушает работу приложения, поскольку вложенные поля (в моем примере, например, getRoom.id) недоступны.

Пример компонента:

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>
);

aws-amplify aws-appsync graphql
person Pinguin Dirk    schedule 30.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня та же проблема, я думаю, что ampify ожидает, что разработчик проверит, будет ли ответ Ready. Я решил это:

<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>
      )
    }
}

person KingBowen    schedule 02.10.2018

arrow_upward
1
arrow_downward

См. ССЫЛКА НА AWS API.

Соответствующий фрагмент кода из приведенной выше ссылки:

<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>

Обратите внимание, что внутри компонента Connect есть не только «данные», но также «ошибка» и «загрузка». Поскольку это асинхронный запрос, если вы попытаетесь вернуть данные немедленно, их там не будет, но если вы сделаете так, как показано в приведенном выше примере (при условии, что ваш запрос, конечно, возвращает данные), все должно быть в порядке.

person jupiterjelly    schedule 19.08.2019