CODEWITHSUNDEEP
graphqlapollo
Nicolas Maujean
Nicolas Maujean

Reputation: 23

how to wait a graphql query is finished using apollo?

I have the following code :

  ngOnInit() {

    this.data = this.apollo.query({ query: ResidentQuery }).subscribe(({data, loading}) => {
      this.data = data;
      this.loading = loading;
    });

    if (!this.loading) {
      // using this.data
    }
   }

I want data to be loaded before processed themm after the (!this.loading). It is not the case as loading is asynchronous. How I can wait the data is loaded before using them ?

I am making a graphql query using apollo client. ResidentQuery is a string containing the graphql query.

Thank you for your feedbacks !

Upvotes: 0

Views: 3145

Answers (1)

Kevin Danikowski
Kevin Danikowski

Reputation: 5206

I'm not sure how angular works, but I know how it works in react and I know the two are similar.

In react, you need to use componentWillReceiveProps() (EDIT: Now Deprecated), for example:

componentWillReceiveProps(newProps){
        if(!newProps.query.loading){
            this.setState({data: newProps.query.data})
        }
    }

From the medium article for how angular and react lifecycles are similar

Basically, the props will be bind automatically by Angular, so I suppose the setter and getter function will be that part, which gives you a way to generate complex state or variable, like what you can do in componentWillReceiveProps().

Upvotes: 2

Related Questions