Weird behavior observed with NativeScript Firebase and ES6 promises

Question

Weird behavior observed with NativeScript Firebase and ES6 promises

My goal is to connect 2 Firebase queries using promises, as I require the result of the first query in order to execute the second one. Below are the details of the 2 queries:

QUERY FOR VALUE A:

    private getValueA(){
    var queryEvent = (result):void  =>{
        console.dump(result);
        this._valueA = result.value;
    }
    return firebase.query(
        queryEvent,
        FirebaseValueAPath, 
        {
            singleEvent : true,
            orderBy : {
                type: firebase.QueryOrderByType.CHILD,
                value: 'since' 
            }
        });
    }

QUERY FOR VALUE B:

    private getValueB{

        let FirebaseValueBPath :string = this._valueA
        var queryEvent = (result) :void =>{
            console.dump(result);
            if(result.value){
                this._valueB = result.value;
            }
        }
        return firebase.query(
            queryEvent,
            FirebaseValueBPath,
            {
                singleEvent : true,
                orderBy : {
                    type    : firebase.QueryOrderByType.CHILD,
                    value   : 'since'
                }
        });
    }
}

Next, I attempt to link them together by implementing the following :

constructor(){
    this.getValueA().then(
     (success) :void => {
    this.getValueB();
   });
}

The outcome reveals some issues:

Oddly enough, console.log(result) within the getValueB function is displayed before the log from inside the getValueA function (why??)
this.valueA is undefined in getValueB, rendering my query ineffective
The application crashes

Where did I go wrong in my code? Is there a different method I should be utilizing for this scenario? Appreciate your assistance on this matter :)

javascript typescript firebase-realtime-database nativescript es6-promise

Answer 1

Answer №1

Utilizing promises requires resolving the result within your callback function. Check out the code snippet provided below:

class DataFetcher {
    constructor() {
        this.fetchDataA()
            .then(resultA => this.fetchDataB(resultA));
    }

    fetchDataA() {
        return new Promise<string>((resolve, reject) => {
            firebase.query(
                (result) => {
                    resolve(result.value); // Resolving to return the result
                },
                FirebaseValueAPath, 
                {
                    singleEvent: true,
                    orderBy: {
                        type: firebase.QueryOrderByType.CHILD,
                        value: 'since' 
                    }
                }));
        });
    }

    fetchDataB(valueA: string) {
        return new Promise<string>((resolve, reject) => {
            firebase.query(
                (result) => {
                    resolve(result.value);  // Resolving to return the result
                },
                valueA, 
                {
                    singleEvent: true,
                    orderBy: {
                        type: firebase.QueryOrderByType.CHILD,
                        value: 'since' 
                    }
                }));
        });
    }
}

Answer 2

Utilizing promises requires resolving the result within your callback function. Check out the code snippet provided below:

class DataFetcher {
    constructor() {
        this.fetchDataA()
            .then(resultA => this.fetchDataB(resultA));
    }

    fetchDataA() {
        return new Promise<string>((resolve, reject) => {
            firebase.query(
                (result) => {
                    resolve(result.value); // Resolving to return the result
                },
                FirebaseValueAPath, 
                {
                    singleEvent: true,
                    orderBy: {
                        type: firebase.QueryOrderByType.CHILD,
                        value: 'since' 
                    }
                }));
        });
    }

    fetchDataB(valueA: string) {
        return new Promise<string>((resolve, reject) => {
            firebase.query(
                (result) => {
                    resolve(result.value);  // Resolving to return the result
                },
                valueA, 
                {
                    singleEvent: true,
                    orderBy: {
                        type: firebase.QueryOrderByType.CHILD,
                        value: 'since' 
                    }
                }));
        });
    }
}

Weird behavior observed with NativeScript Firebase and ES6 promises

Answer №1

Similar questions

What is the best way to showcase a file edited in Emacs within Atom?

Troubleshooting: ng-model items not appearing in AngularJS $scope object

Looking to obtain an audio file from a URL in Node.js?

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

Issues with the bootstrap 4 modal update

Tailwind does not display font sizes using random values

IDE flags an error with TypeScript type declarations

Updating a List Conditionally in React

Encountering vulnerabilities during the deployment of my React App using NPM has presented a challenge

Switching to a different view in a React Native application

Guide on parsing a JSON array passed from JavaScript using json_decode?

Can AJAX be considered a backend tool for retrieving data from servers?

What could be causing the res.sendfile() method to fail when invoked through a jQuery ajax call?

Error message in Angular 2, Problem found in inline template while utilizing eval() function

Automatically choose radio buttons within an li element in a loop

In the realm of Typescript Angular, transferring the value of an object's property to another property within the

How do I connect to a different application's view?

When the mouse drags across the empty space, the force graph continually jumps

Enum-Based Object Indexing

Adding Rows to a DataTables Table