Fetch API returning old data in react native

Question

Description: I'm making a react native app, where I have a list of github users that I'm following and I want to implement the functionality to unfollow and refresh the list.

I made two asynchronous helpers to interact with the github API, one to unfollow the user(via PUT) and another one to get the list of followings(via GET). I also added a firebase listener in the list of followings component. Each following would navigate me to an individual profile view consisted of a unfollow button. When I click a button, it should unfollow the user, update the list of followings in the component and then navigate back to the list of followings component.

Problem Unfollowing the user is working as expected, but the list of followings view still contains the old list. My code is returning back the old data, even though the github api is returning the new updated data, so I'm suspecting the problem must be the way I'm using async/await.

I even made a refresh button to refresh the list of followings, but the new data only gets returned sometimes, like 1/20 times.

UPDATE: After testing multiple scenarios, I don't think firebase is the problem since fetch is returning the same old data. I think the main problem might lie in the fetch call. I've tested grabbing the data from Postman as well and it grabs the correct data.

It seems like fetch is not working as expected since response.json() contains the old data. I've made a simple jsfiddle here (you need to supply your own access token) that shows get_following -> unfollow -> get_following working successfully, aka the following data are modified. However, in my app the fetch returns the same old following data before the unfollow even though the github website UI shows the change and Postman returns the new modified data. I've also updated the code a little bit.

Code

List of followings

    /**
     * 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())
            }
        />
    )
}

Github Api Helpers

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's 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

Try this:

let response = await fetch(url, {
  headers: {
    'Cache-Control': 'no-cache'
  }
});