Fetch API returns old data to

Question

Description : I am creating an interactive native application where I have a list of github users that I follow and I want to implement functionality to unsubscribe and update the list.

I made two asynchronous helpers to interact with the github API to unsubscribe from a user (via PUT) and the other to get a follow-up list (via GET). I also added a firebase listener to the list of the following components. Each subsequent one will move me to a separate profile consisting of an unfollow button. When I click the button, it should unsubscribe from the user, update the list of elements in the component, and then return to the list of the next component.

Problem Unfollowing the user is working as expected, but the list of the next view still contains the old list. My code returns old data, although github api returns new updated data, so I suspect the problem is how I use async / wait.

I even made an update button to update the list of subsequent ones, but new data is returned sometimes, for example, 1/20 times.

UPDATE . After testing several scenarios, I don't think firebase is a problem as it fetchreturns the same old data. I think the main problem may be the challenge fetch. I also tested data capture from Postman and it captures the correct data.

It fetchdoes not seem to work as expected as it response.json()contains old data. Here I made a simple jsfiddle (you need to provide your access token), which shows that it get_following -> unfollow -> get_followingworks successfully, the data is changed. However, in my application, it fetchreturns the same old following data before unfollow, even if the github website user interface shows the change, and the postman returns the new changed data. I also updated the code a bit.

code

List of following

    /**
     * Listens for any changes on the database and updates the
     * dataSource accordingly.
     * @param {Firebase Object} ref
     */
    _listenForData(ref) {
        ref.on('value', (snapshot) => {
            this.setState({
                dataSource: snapshot.val()
            },
            this.setState({
                isLoading: false,
            }));
        });
    }

    componentDidMount() {
        // Sets up the listener for realtime changes.
        GithubApi.get_followings(this.ref)
        .then(_ => this._listenForData(this.ref));
    }

Individual user with unfollow button

async unfollow() {

    try {
        let success = await GithubApi.unfollow_user(this.state.login);
        console.log('unfollowed user');
        console.log(success);
        if (success) {
            // Updates database after unfollowing
            console.log('update followings')
            await GithubApi.get_followings(this.ref);
            return true;
        }
    } catch (error) {
        console.error(error);
        return false;
    }
}

render() {
    const { goBack } = this.props.navigation;
    return (
        <Button
            title='Unfollow'
            onPress={
                () => this.unfollow().then(_ => goBack())
            }
        />
    )
}

Aides Github Api

const GithubApi = {
    url: 'https://api.github.com/',
    access_token: ...,

    /**
     * An asychronous helper function to grab data from github
     * given an url and add data the firebase.
     *
     * @param {string} url
     * @param {Firebase Object} firebaseRef
     */
    _get_data_from_github_with_firebase: async function(url, firebaseRef) {
        try {
            let response = await fetch(url);
            let responseStatus = await response.status;
            let responseJson = await response.json();
            if (responseStatus === 200) {
                firebaseRef.set(responseJson,
                (error) => {
                    if (error) {
                        console.log(error);
                        return false;
                    } else {
                        return true;
                    }
                });
            }
            return false;
        } catch (error) {
            return false;
        }
    },

     /**
     * Gets the user following data and adds it to the database.
     * @param {Firebase Object} firebaseRef
     */
    get_followings: async function(firebaseRef) {
        return await this._get_data_from_github_with_firebase(
            this.url + 'user/following?' + this.access_token,
            firebaseRef
        );
    },

    unfollow_user: async function(username) {
        try {
            let url = this.url + 'user/following/' + username + '?' + this.access_token;
            let response = await fetch(url, { method: 'DELETE'});
            let responseStatus = await response.status;
            if (responseStatus === 204) {
                return true;
            }
            return false;
        } catch (error) {
            return false;
        }
    },

Answer 1

await _get_data_from_github_with_firebase. :

_get_data_from_github_with_firebase: async function(url, firebaseRef) {
        try {
            let response = await fetch(url);
            let responseStatus = await response.status;
            let responseJson = await response.json();
            var result = false
            if (responseStatus === 200) {
                result = await firebaseRef.set(responseJson,
                (error) => {
                    if (error) {
                        console.log(error);
                        return false;
                    } else {
                        return true;
                    }
                });
            }
            return result;
        } catch (error) {
            return false;
        }
    },

redux-saga .

Answer 2

, , C? ?

, , :

_get_data_from_github_with_firebase: async function(url, firebaseRef) {
        try {
            let response = await fetch(url);
            let responseStatus = await response.status;
            let responseJson = await response.json();
            var result = false
            if (responseStatus === 200) {
                result = await firebaseRef.set(responseJson,  //You are executing a method by reference
                (error) => {
                    if (error) {
                        console.log(error);
                        return false;
                    } else {
                        return true;
                    }
                });
            }
            return result;
        } catch (error) {
            return false;
        }
    },

, JS , , . responseJson , .

, responseJson , undefined .