I am trying to return a user list on a component from my backend and I am having trouble passing my userID param back. I am using useEffect to pull the data from Redux then call an action on the component with what I think is the declared param. The correct userID is being passed correctly as far as I can see however I think the error is occuring when the route is passed the param.
In my action how should I pass the param of the userID that I want to get the data for? I have console.log the param.id/param.userID/userID etc. In the component I have the user.userID (from useSelector) however in the action folder I don't know how to pass it to the backend.
Also in the backend do I always have to set my params as id? can these have the same name as the value on the front-end such as 'userID'? I can only seem to get the backend Postman calls working with :id.
component
const user = useSelector(state => state.auth.user);
const [userDiveLog, setUserDiveLog] = useState({
user: [],
userDiveLogList: [],
expanded: false
})
// get access to dispatch
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchUserDiveLog(user.userID));
}, []);
action
// pulls the user dive log
export function fetchUserDiveLog(params, credentials, diveLogUserList){
return function(dispatch){
return axios.get("http://localhost:5002/api/divelog/userdiveloglist/" + params.userID)
.then(({data}) => {
dispatch(userDiveLogList(data));
});
};
}
Backend
route
// return an individual dive log
app.get('/api/divelog/userdiveloglist/:userID', controller.userDiveLog);
controller
exports.userDiveLog = (req, res, params, userID) => {
try {
const userID = req.params.userID
diveLog.findAll({
include: {all: true},
where: {diverUserNumber: userID}
})
.then(diveLog => {
const userDiveLogList = [];
for (i = 0; i < diveLog.length; i++) {
userDiveLogList.push(diveLog[i].dataValues);
}
if (!userDiveLogList) {
return res.status(404).send({message: "No dive logs belonging to this user"});
}
res.status(200).send({
data: userDiveLogList
})
})
} catch(err) {
res.status(500).send({
message: "Error retrieving dive log belonging to user id= " + id
});
}
};
Frontend
You're passing the user id (user.userID - a string) to the fetchUserDiveLog function but you're treating it like a params object with the userID property inside the function. params.userID returns undefined since params is a string (it holds the user id). Rename params to userId and add it to the URL.
You can also remove the credentials and diveLogUserList arguments from the fetchUserDiveLog function since they aren't used.
export function fetchUserDiveLog(userId) {
return (dispatch) => {
return axios
.get(`http://localhost:5002/api/divelog/userdiveloglist/${userId}`)
.then(({ data }) => {
dispatch(userDiveLogList(data))
})
}
}
Btw, you shouldn't hardcode the API URL. Use environment variables. If you're using Create React App, you can add environment variables prefixed with REACT_APP_ to .env or you can use dotenv-webpack if you have a custom Webpack setup.
Backend
There are a few issues with the backend code.
The userDiveLog function receives the next function as the third argument but it is named params which is confusing. Since you don't need the next function in the request handler, you should remove the params and userID arguments from the function. You can get access to userID from the req.params object which you're doing correctly.
exports.userDiveLog = (req, res) => {
// ...
}
The if (!userDiveLogList) condition will never be true since userDiveLogList is an array which is truthy in JavaScript. You can actually remove the if block. A response of { data: [] } will be sent if the user doesn't have any Divelogs which is perfectly okay. You can also omit the status(200) call since the status is automatically set to 200. And you can refactor the code by using object destructuring and Array.prototype.map to transform the divelogs.
const { userID } = req.params
const diveLogs = await diveLog.findAll({
include: { all: true },
where: { diverUserNumber: userID },
})
const data = diveLogs.map((log) => log.dataValues)
res.send({ data })
The catch block references the variable id which isn't defined anywhere. It should be userID instead.
The whole code using async/await:
exports.userDiveLog = async (req, res) => {
const { userID } = req.params
try {
const diveLogs = await diveLog.findAll({
include: { all: true },
where: { diverUserNumber: userID },
})
const data = diveLogs.map((log) => log.dataValues)
res.send({ data })
} catch () {
res.status(500).send({
message: `Error retrieving dive log belonging to user id= ${userID}`,
})
}
}
I have identified two questions after reading the description and I am going to answer each of those at a time.
Do I have to set the query parameter as Id?
No, there are no restrictions on the name of query parameter. You can literally name it as "something".
That said, there are some conventions and those dictate that you need to name the parameter to something that is appropriate.
How do I pass userId to my Action Creator?
First of all check the Function that is wrapping your Thunk. It expects 3 parameters: params (POORLY NAMED), credentials and diveLogUserList.
Where as, it is being dispatched with only 1 argument: userID.
Reconfigure this Wrapper Function to just receive the userID as an argument (and send credentials, diveUserList as an extra argument to the Thunk and not the wrapper function; This depends upon the functionality that you desire which is not properly understandable using the Description that you have provided).
After you reconfigured the wrapper function, you will dispatch the same like this:
fetchUserDiveLog(userID).
The Function handling your Route is incorrect
If I am not mistaken, controller.userDiveLog should only receive 3 arguments yet, you have defined your handler with 4 parameters.
The arguments that your handler should expect are: request, response and next.
The User ID that your handler expects will be a query parameter and will be accessible using: request.params.userID.
There is no need to expect userID as an argument to your handler.
Additional Information
I recommend going through these to get a better explanation and along with that, I recommend use of console.log as a method to debug the code. It will help you identify problems such as:
How many arguments is this function receiving?
What is the type of the argument received?
And much more
References
Route Function or Route Handler
Route Parameters
Sending Extra Argument to a Thunk
Related
I was trying to send put request using axios to update information about a book in mongodb, the code is working fine when using postman but it is not working using axios.put used inside react component when submitting, while axios.delete is working fine. I think the problem is that sending the query object in that way is not the right way but I am not able to find the solution.
This is the function that handleSubmit,
the 'id' is the id of the book
'updates' is a state object that contains all the changes that should happen in the book data.
And the second function handleChange is the function that setupdates according to changes in the inputs
const handleSubmit = async (e) => {
e.preventDefault();
try {
const res = await axios.put("http://localhost:8000/book/edit/" + id, {
params: {
updates,
},
});
setNewBook(res.data)
} catch (err) {
console.log(err);
}
};
const handleChange = (e) => {
e.preventDefault();
const value = e.target.value;
setUpdates({
...updates,
[e.target.name]: value,
});
};
maybe you misunderstood the axios put method. as per the axios docs provided (https://github.com/axios/axios#axiosputurl-data-config) the correct structure is axios.put(url[, data[, config]])
The first parameter is URL
The second parameter is data (body request).
3rd parameter is config (you leave params in this parameter)
It should be like this
const res = await axios.put("http://localhost:8000/book/edit/" + id, null, {
params: {
updates,
},
});
I hope this can help you
So guys, what I want to accomplish and not manage to get is to write a function that performs a query against database as a middleware, using req and res objects, and also can be used in a socket connection, to pass parameters to it and not use the req and res objects. Also I want it to return the result of the query. I tried using a middleware wrapper
function myFunc(param1, param2){
return (req, res) => {
here query
}}
works when hitting the endpoint with or without args i send, but dosnt work when i call the function from somewhere else
When you call myFunc you get returned a new function. You need to invoke that funcion, something like
myFunc('value1', 'value2')()
This will cause an error since you have no request or response object. These are express objects.
A better way to re-use the database code would be to put it in a function and inject that function to the middlewere.
E.g.
function getArticleById(id) {
return db.query('select * from articles where id = $1', [id])
}
Then create a middlewhere that takes this function in as dependency
function makeMiddlewere (getArticleById) {
return (req, res) => {
return articleById(req.query.id).then(articles => {
res.json(articles)
})
}
}
Then in your code you can do
Normal way
getArticleById(5).then(articles => {
console.log(articles)
})
Create the middlwere an
const express = require('express')
const getArticleById = require('./articlebyid')
const makeMiddlewere = require('./makemiddlewere')
const middlwere = makeMiddlwere(getArticleById)
const app = express.app
app.get('/article', middlewere)
express and knex are beating me a little; I can't make this endpoint work using req.querys (response from express), even though I made one with req.params and it was ok.
Express:
app.get(`/actor`, async (req: Request, res: Response) => {
try {
// const { gender } = req.query;
const count = await getActorsByGender(req.query.gender as string);
console.log({ count });
res.status(200).send({ quantity: count, });
} catch (error) {
res.status(200).send({ message: error.sqlMessage || error.message });
}
});
Knex requisition:
const getActorsByGender = async (gender: string): Promise<any> => {
try {
const result = await connection.raw(`
SELECT COUNT(*) as count FROM Actor
WHERE gender = "${gender}"
`);
// console.log(`Temos: ${result[0][0].count} ocorrências`);
return result;
} catch (error) {
console.log(error);
}
};
This might be because of the count(), but I'm not sure. The knex part is ok; I can console.log() the result.
The express part showed a empty object on insomnia
Using 'male' as parameter it was expected to return "2" as result.
Your sending male as a route/path parameter since you use http://localhost:3000/actor/male.
If you want to access it as a query-param, you can leave your code as it is, but you need to change your request-url to http://localhost:3000/actor?gender=male
Note that ff you wanted to define gender as a route-parameter, you'd need to change your route-handler to app.get("/actor/:gender") and access it using req.params.gender.
You are using path param in insomnia, not query param
If you want to use query params, you have to remove /male from the URL, and add query param key and value below the URL.
You could also change the URL to locahost:3000/actor?gender=male
I haved used axios.delete() to excute delete in frontend ,code like below
Axios({
method: 'DELETE',
url:'http://localhost:3001/delete',
params: {
id:id,
category:category
}
})
And I used koa-router to parse my request in backend ,but I can't get my query params.
const deleteOneComment = (ctx,next) =>{
let deleteItem = ctx.params;
let id = deleteItem.id;
let category = deleteItem.category;
console.log(ctx.params);
try {
db.collection(category+'mds').deleteOne( { "_id" : ObjectId(id) } );
}
route.delete('/delete',deleteOneComment)
Could anyone give me a hand ?
Basically, I think you misunderstood context.params and query string.
I assume that you are using koa-router. With koa-router, a params object is added to the koa context, and it provides access to named route parameters. For example, if you declare your route with a named parameter id, you can access it via params:
router.get('/delete/:id', (ctx, next) => {
console.log(ctx.params);
// => { id: '[the id here]' }
});
To get the query string pass through the HTTP body, you need to use ctx.request.query, which ctx.request is koa request object.
Another thing you should be aware with your code is essentially, a http delete request is not recommended to have a body, which mean you should not pass a params with it.
You can use ctx.query and then the name of the value you need.
For instance, for the given url:
https://hey.com?id=123
You can access the property id with ctx.query.id.
router.use("/api/test", async (ctx, next) => {
const id = ctx.query.id
ctx.body = {
id
}
});
per koa documentation ctx.request.query
I'm using the Sails.js MVC and I'm trying to setup a service so I can make a call to an Active Directory server and pass the data for a user back to my controller.
I'm using some internal company modules for this which connect to our servers and pass back a user array with all the data for a selected user.
If I do this by making a function directly in the API controller it works fine, but when doing it by calling through a function from a separate file, rather than returning an array of [Function: bound].
Code from controller (LabController.js):
var adGet = require('../services/adGet');
module.exports = {
test: function (req, res) {
console.log(adGet.userData);
res.view({
user: adGet.userData
});
}
}
Code from the service (adGet.js):
module.exports = {
userData: function (req, res) {
var ad = require('active-directory');
ad.setCredentials({
user: 'username_removed',
password: 'password_removed'
});
ad.getUser(req.session.sisso.idsid).then(function (user) {
return (user);
});
}
}
Any help is greatly appreciated.
There's a few issues here.
First, you're trying to use return in your userData service method to return data, but it's an asynchronous function so that return statement is sending the data anywhere. You need to pass in a callback function as an argument to userData that can be called when the data is ready (i.e. when the database query returns):
module.exports = {
// note the new `cb` argument
userData: function (req, res, cb) {
var ad = require('active-directory');
ad.setCredentials({
user: 'username_removed',
password: 'password_removed'
});
ad.getUser(req.session.sisso.idsid)
.then(function (user) {
// Still nice to use `return` to make sure nothing
// gets executed after this statement, but it's the
// callback function that actually gets the data.
// Note the `null` first argument, indicating no errors.
return cb(null,user);
})
.catch(err) {
return cb(err);
});
}
}
Second, you're sending the adGet.userData function to your view as a local variable, but you're not actually calling it to get the data. And since it's an asynchronous function, you won't be able to call it from your view. You need to call it from within the controller and send the result to the view:
var adGet = require('../services/adGet');
module.exports = {
test: function (req, res) {
// Call service function, passing callback function in as argument
adGet.userData(req, res, function(err, user) {
// Handle errors
if (err) {return res.serverError(err);}
// If all goes well, send user data to view
return res.view({
user: user
});
});
}
}
Less importantly, you could refactor the userData method to not accept req and res as arguments--it's overkill. Save req and res for your controllers whenever possible. It would be better to have userData just expect userId and callback as arguments. Also, unless you've turned global services off using the config/globals.js file, you don't need to require the services file at the top of your controller; the adGet variable will be made available to you automatically.