AWS AppSync API graphlQL - 需要同步调用 [重复]答案

【问题标题】：AWS AppSync API graphlQL - synchronous call needed [duplicate]AWS AppSync API graphlQL - 需要同步调用 [重复]
【发布时间】：2021-01-24 17:16:05
【问题描述】：

我已经使用 React 框架建立了一个项目，并且只想在组件上显示数据。一切正常。我唯一的问题是来自 @aws-amplify/api 的异步 API.graphQL 函数。我正在使用打字稿并想使用类。

我应该在哪里解决异步，当我使用类时？

例子：

//File showData.tsx
    
export default class ShowForm extends Component
render() {
 //html
}


//File showData.tsx

export default class ShowForm extends Component
render() {
//html
}

componentDidMount(){
//read Data
Database.getForms("Id");
setState....

}

class Database.tsx
export default class DatabaseOperation{

getForms(formID): Form {

var test = (async function(){
call query)
//call api
list = await API.graphql(graphqlOperation(listForms, listQV));
....
}
return test.

}

我尝试了很多事情：创建了一个真正的异步方法，以不同的方式处理承诺，...

但是当我调试它时，我总是在这一点结束，它会在没有完成异步函数的情况下返回“NON ASYNC”方法。所以我不能处理数据。我想我错过了什么。

【问题讨论】：

谢谢你，我2天前读过这篇文章。而且我以为我已经尝试了所有方法，但我错过了一件重要的事情:-) 请参阅下面的答案...谢谢！

标签： typescript amazon-web-services graphql aws-appsync

【解决方案1】：

有时您会在几天后找到答案。当我再次阅读这篇文章时，我可以清楚地知道该怎么做：

我可以简单地将 setState 方法放入 componentDidMount() 并包含方法 setState。 setState 稍后将开始渲染。因此，可以确保它将起作用... 还有另一个好处。通过初始渲染，我可以放置一个“等待屏幕”...

我的解决方案如下：

componentDidMount(){
//read Data
this.loadData(this.state.formID);

}

async loadData(formID: string) {
// definitiion; 
...
// call API
const list: any = await API.graphql(graph);
//get data from return
...
// set state
    this.setState({
      form: newForm
    }) ; 
}

有效！！！谢谢！希望它也能对其他人有所帮助......

【讨论】：