AWS AppSync API graphlQL - synchronous call needed

Question

I have set up a project with the React framework and simply want to show data on a Component. Everything works fine. My only problem is the the asynchronous API.graphQL function from @aws-amplify/api. I am using a typescript and want to work with classes.

Where should I solve the asynchronous, when I use classes?

Example:

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

}

I tried many things: created a real async method, handled the promises in a different way, ...

But when I debug it, I always end at the point, that it will return to the "NON ASYNC" method without finishing the async function. So I can not work with the data. I think I missed something.

Thank you, I have read this article 2 days ago. And I thought I have tried everything, but I missed an important thing :-) See my answer below... Thank you! — Henrik Lienstromberg, Oct 10 '20 at 10:12

score 1 · Answer 1 · answered Oct 10 '20 at 10:22

Sometimes you find the answer after a few days. When I read over the article again, It could clear for me, how to do it:

I can simply put the setState method into the componentDidMount() AND include the method setState. The setState will later start the rendering. So it is ensured, that it will work... And another benefit. With the initial render I can put a "waiting screen"...

Solution for me looks like that:

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

Works!!! Thank you! Hope it will help someone else as well...

AWS AppSync API graphlQL - synchronous call needed

1 Answers1