Why my graphql implementation returns "undefined" after executed in ngOnInit?

Question

what I am trying is to fetch some data on the page load, and then use a part of the fetched data to fetch another piece of data and display. Thanks in advance for your time.

The Problem

As I added my code below, I need to use getFirstResults() and getSecondResults() two times in the component. First is in ngOnInit by calling them in getData() , second is in function which is triggered by a button.

The problem is here when I call the getFirstResults() and getSecondResults() in ngOnInit in any way, I receive "undefined" value when I call them in in functionActivatedByButton().

If I remove getFirstResults() and getSecondResults() from ngOnInit, everything works perfect but I can't receive the data on page load.

What I've tried so far

functionActivatedByButton()

• Remove getFirstResults() and getSecondResults() from getData() and call them in ngOnInit

      ngOnInit(): void {
           this.getData();
           getFirstResults();
           getSecondResults();
         }

• Created child components and devide the calls.
• Created different queries and try to call one in ngoninit and the other one in

---

Here is the code:

     ngOnInit(): void {
            this.getData();
          }

private getData(): void {
    this.dataServiceOne
      .fetch(someParams)
      .pipe(takeUntil(this.onDestroy$))
      .subscribe((data) => {
        this.object = data;
        this.checkStatus(this.object.status);
        this.getFirstResults();
        this.getSecondResults();
      });   }

    private getFirstResults(): void{
        this.dataServiceTwo
          .fetch(someOtherParams)
          .pipe(takeUntil(this.onDestroy$))
          .subscribe((data) => {
            if (data) {
              // do something
            } else {
              // do something else
            }
          });
      }

    private getSecondResults(): void{
        this.dataServiceThree
          .fetch(someOtherParams)
          .pipe(takeUntil(this.onDestroy$))
          .subscribe((data) => {
            if (data) {
              // do something
            } else {
              // do something else
            }
          });
      }

    public functionActivatedByButton(): void {
        this.dataServiceFour
          .mutate(params)
          .pipe(takeUntil(this.onDestroy$))
          .subscribe((result) => {
            if (result) {
              //do some stuff
              this.getFirstResults();
            } else {
              //do some other stuff
            }
          });
        this.dataServiceFive
          .mutate(params)
          .pipe(takeUntil(this.onDestroy$))
          .subscribe((result) => {
            if (result) {
              //do some stuff
              this.getSecondResults();
            } else {
              //do some other stuff
            }
          });
      }