Graphql aws amplify react Connect首先返回未定义的数据

我有以下设置：

• aws放大反应
• 应用同步
• 创建react应用程序

并遵循本文件：

与在文档中一样，在返回正确的数据之前，呈现它会给我2x

未定义的数据。这会破坏应用程序，因为无法访问嵌套字段（在我的示例中，例如
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>
);

export const AppSyncTest=（）=>(
{（{data:{getRoom}}）=>{
console.log（getRoom）；//返回数据存在之前未定义的2x
如果（！getRoom）{//没有此选项，应用程序将中断
返回“为什么？（如果加载为false，甚至可能发生）”；
}
返回(
欢迎使用IntelliFM WebApp

找到了带有标签{getRoom.label}和说明{'}的房间{getRoom.id}
{getRoom.description}

);
}}
);
我也遇到了同样的问题，我认为amplify希望开发人员检查响应是否准备就绪。我通过以下方式解决了这个问题：



{this.test}
常量测试=（appSyncResponseObject:any）：any=>{
如果（appSyncResponseObject.data==null||
appSyncResponseObject.data.getRecords==null）{
返回null；
}否则{
const records=appSyncResponseObject.data.getRecords；
返回(
列出所有记录

{records.map(
（记录）=>
（
{records.context}
）
)
}

)
}
}
请参见

上述链接中的相关代码段：

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


{（{data:{listtoos}，正在加载，错误}）=>{
如果（错误）返回（错误）；
如果（正在加载| |！listTodos）返回（正在加载…）；
返回（）；
}}

请注意，Connect组件的内部不仅包含“数据”，还包含“错误”和“加载”。由于这是一个异步请求，如果您尝试立即返回数据，它将不在那里，但是如果您按照上面的示例所示执行（当然，假设您的请求返回数据），您应该会做得很好