aws-усиление-реакция Connect сначала возвращает неопределенные данные - PullRequest
Новая
       36

aws-усиление-реакция Connect сначала возвращает неопределенные данные

0 голосов
/ 30 мая 2018

У меня есть следующие настройки:

  • aws-усиление-реакция
  • 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>
);

Ответы [ 2 ]

0 голосов
/ 19 августа 2019

См. AWS API 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>

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

0 голосов
/ 02 октября 2018

У меня возникла та же проблема, я думаю, ampleform ожидает, что разработчик проверит, является ли ответ 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>
      )
    }
}
...