Having a hard time getting data to come through in front end (rel: issue 59)

[alysarnau]

Describe the bug A clear and concise description of what the bug is. The call from issue 59 does not deliver consistent results - occasionally it just gives gives the list of services, without the user!

What is the problem you are trying to solve? Trying to get it to return consistent results

Expected behavior A clear and concise description of what you expected to happen. I am expecting an array with a user and a list of services.

What is the actual behavior? A clear and concise description of what actually happened. I get an array occasionally of JUST services.

Post any code you think might be relevant (one fenced block per file)

(see issue 59)

What is your best guess as to the source of the problem? No idea honestly

What things have you already tried to solve the problem? Checked the back end multiple times, occasionally the page works - but not regularly.

Additional context Add any other context about the problem here.

NA

Paste a link to your repository here https://github.com/alysvolatile/Scumptious_Bunch_Client/branches https://github.com/alysvolatile/Scrumptious-Bunch-API/branches

[kestler01]

hey Alys, is this the route we're having issue with here ?

router.get('/services/freelancer/:userId', (req, res, next) => {
    // req.params.id will be set based on the `:id` in the route
    // will we also need to get all services with them as owner?
    const userId = req.params.userId
    let freelancerArray = [];
    User.findById(userId)
        .then(handle404)
        // this will make it so that the user is always at freelancerArray[0]
        .then((user) => freelancerArray.push(user))
        .catch(err => console.log(err))
    Service.find( {owner: userId})
        .then(handle404)
        .then((services) => {
            freelancerArray.push(services)
            res.status(200).json({ services: freelancerArray })
        })
        .catch(next)
})

it looks like we might have a race condition here ! - where the User.find by id is not complete by the time the Service.find completes and gets to the res try nesting the the Serive.find etc into it's own then and taking the res part to it's own then so that it all resolves as 1 chain

[kestler01]

for the future, the telltale sign of the 'race condition' is inconsistent results

[alysarnau]

interesting - I'm not sure how we would nest, though? Would it look like this?

router.get('/services/freelancer/:userId', (req, res, next) => {
    // req.params.id will be set based on the `:id` in the route
    // will we also need to get all services with them as owner?
    const userId = req.params.userId
    let freelancerArray = [];
    User.findById(userId)
        .then(handle404)
        // this will make it so that the user is always at freelancerArray[0]
        .then((user) => freelancerArray.push(user))
        .then(Service.find( {owner: userId})
            .then(handle404)
            .then((services) => {
                freelancerArray.push(services)
                res.status(200).json({ services: freelancerArray })
            })
            .catch(err => console.log(err)
        )
        .catch(next)
})

I'm going to get lunch but back to this right after!

[kestler01]

very close,! we will want to make sure we're still using anonymous arrow functions in our then's. We also want to move as many of our newly nested promises(thens) to be inline with the original chain to avoid 'promise chain hell' - very real place that is no fun

[alysarnau]

Resolved, thank you Andrew!

Solution:

router.get('/freelancer/services/:userId', (req, res, next) => {
    // req.params.id will be set based on the `:id` in the route
    // will we also need to get all services with them as owner?
    const userId = req.params.userId
    console.log('here is the user Id', userId)
    let freelancerArray = [];
    User.findById(userId)
        .then(handle404)
        // this will make it so that the user is always at freelancerArray[0]
        .then((user) => freelancerArray.push(user))
        .then(() => {
            let serviceVariable = Service.find( {owner: userId})
            console.log('here is serviceVariable', serviceVariable)
            return serviceVariable
        })
        // Service.find( {owner: userId})
        .then(handle404)
        .then((services) => {
            freelancerArray.push(services)
            res.status(200).json({ services: freelancerArray })
        })
        .catch(next)
})