Search code examples
node.jsreactjsionic-frameworkfetch-apiionic6

FETCH request doesn't work unless I refresh my page


I have a React-Ionic web app doing some queries to a custom NodeJS server. I can read users but I cant create one unless I refresh my page. All of my GET and POST queries are working properly after I refresh my page.

Here is my function to create a User. Every log are showing except 'USR SUCESSFULLY LAUNCH...'

export async function createUser(p_user: StudentSkeletonDB) {
    //Normalize name guid familyname and comments
    //Removing all specials characters

    console.log("USR STARTING TO CREATE :")

    let newUser: StudentSkeletonDB = p_user;
    newUser.firstname = newUser.firstname.replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\]/g, '');
    newUser.guid_id = newUser.guid_id.replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\]/g, '');
    newUser.familyname = newUser?.familyname != undefined ? newUser.familyname.replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\]/g, '') : "";
    newUser.comments = newUser?.comments != undefined ? newUser.comments.replace(/[~`!@#$%^&*()+={}\[\];:\'\"<>.,\/\\]/g, '') : "";

    console.log("USR NORMALIZED :")
    console.log(newUser)

    var myHeaders = new Headers();
    myHeaders.append('Content-Type', 'application/json');
    myHeaders.append('Content-Lenght', '' + JSON.stringify(newUser).length);

    var data = new FormData();
    data.append("json", JSON.stringify(newUser));

    console.log("USR SENDING... :")
   
    return await fetch("http://127.0.0.1:8083/signup", {
        headers: myHeaders,
        method: 'POST',
        body: JSON.stringify(newUser)
    }).then((s) => {
        console.log("USR SUCCESSFULLY LAUNCH... :")
        return s;
    });
}

On my NodeJS Server, even the first log is not showing.

exports.postSignup = async(req, res, next) => {
    //getting user data from request body
    console.log("STARTING TO CREATE USER")
    const { guid_id, firstname, familyname, _password, birthday, usertype, class_id, login, filenumber, avatar, language, isactive, ef_sessionpid, comments, connected, created, simu_password, gender, driving_school_code, nb_connection } = req.body;
    try {

        const user = new User({
            guid_id,
            firstname,
            familyname,
            _password,
            birthday,
            usertype,
            class_id,
            login,
            filenumber,
            avatar,
            language,
            isactive,
            ef_sessionpid,
            comments,
            connected,
            created,
            simu_password,
            gender,
            driving_school_code,
            nb_connection
        });
        const result = await user.createUser();
        result.send(user);
    } catch (error) {
        const errorToThrow = new Error();
        switch (error.code) {
            case '23505':
                errorToThrow.message = 'User already exists';
                errorToThrow.statusCode = 403;
                break;
            default:
                errorToThrow.statusCode = 500;
        }
        //pass error to next()
        next(errorToThrow);
    }
};

I repeat it, but if I refresh any page of my web app, then create a User, everything works properly and al my logs (even NodeJS) are showing. My newUser object is fine even without refreshing, it look like fetch itself doesnt work.

I tried to change fetch url to something totally wrong like return await fetch("http://127.0.0.1:8083/dzedzededze/dzedze)" and it doesn't even raise an error.


Solution

  • FIXED IT !
    The previous request on my NodeJS server was crashing something.
    All POST requests were in a queue.

    There was multiples error in my code like Content-Lenght. I'm not very good in english : 'ght' and 'gth' are a big weakness of mine.
    data was not used either.