Redirect and send data from Node server back to React

Question

I have a NodeJS server in which I'm using Express and a front-end with React. I want to know how to send data from the server to the front-end. All the solutions I've seen use a call from the front-end, then the server answers, and finally the front-end gets the data. My problem is that I don't have a call from the front-end, but a call back-end (router.get('/callback')) to back-end (router.get('/receipt/:id')). Here is the code for a better understanding.

router.get('/callback', (req,res) => {

    const ref = req.query.reference;

    verifyPayment(ref, (error,body)=>{
        if(error){
            //handle errors appropriately
            console.log(error)
            return res.redirect('/payment/error');
        }
        response = JSON.parse(body);   

        const data = _.at(response.data, ['reference', 'amount','customer.email', 'metadata.full_name']);

        [reference, amount, email, full_name] =  data;

        newDonor = {reference, amount, email, full_name};

        const donor = new Donor(newDonor);

        donor.save().then((donor)=>{
            console.log("--------------- donor" + donor);
            if(!donor){
                return res.redirect('/payment/error');
            }
            res.redirect('/payment/receipt/' + donor._id);
        }).catch((e)=>{
            res.redirect('/payment/error');
        });
    });
});

router.get('/receipt/:id', (req, res)=>{

    const id = req.params.id;

    Donor.findById(id).then((donor)=>{
        if(!donor){    
            res.redirect('/payment/error')
        }

        // I'VE TRIED THIS
        //res.redirect('http://localhost:3000/#' + donor.full_name);

        /*
        AND THIS
        console.log(donor.full_name);
        const resp = axios.post('http://localhost:3000', {params: {donor.full_name}});
        console.log(resp.data);
        */
    }).catch((e)=>{
        res.redirect('/payment/error')
    });

});

Now what I want is to come back to the front-end (a index.js using React) and get the data and show it. Any idea?????

Answer 1

You need to understand how the data pass between the Node server and your React App. We use JSON objects to pass the data server to the client (look for REST APIs for more info)

Try this in your server

router.get('/receipt/:id', (req, res)=>{

    const id = req.params.id;

    Donor.findById(id).then((donor)=>{
        if(!donor){    
            res.redirect('/payment/error')
        }

      //How to send the data
      res.status(200).json({
      message: "Data returned Successfully",
      Fullname:"donor.full_name"
    });

    }).catch((e)=>{
        res.redirect('/payment/error')
    });