Develop Reference

Objects are not valid as a React child. If you meant to render a collection of children, use an array

i want to render an email of all the users for testing purpose, In fact i have done that using this method. --- {dataFromApi.map((item, i) => {item.email})} but still it didn't work
const [dataFromApi, setDataFromApi] = useState([]);
const URL = 'http://localhost:5000/users'
const requestOptions = {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
}
const submit = () => {
const data = fetch(URL, requestOptions);
data.then( (userdata) => {
return userdata.json();
}).then( (data) => {
setDataFromApi(data[0]);
}).catch( (err) => {
console.log(err);
})
}
return (
<div className="login">
<h1 className="loginTitle">Choose a Login Method</h1>
<p>{dataFromApi}</p>
<div className="wrapper">
.
.
.
.
.
here is the API response
[
{
"id": 1,
"email": "test1234#gm.com",
"password": null
},
{
"id": 2,
"email": null,
"password": null
},
{
"id": 3,
"email": "test#123.com",
"password": "12345678"
},
{
"id": 4,
"email": "test#231.com",
"password": "12345678"
},
{
"id": 5,
"email": "test#231.com",
"password": "12345678"
},
{
"id": 6,
"email": "test#231.com",
"password": "12345678"
},
{
"id": 7,
"email": "NEWtest#231.com",
"password": "123"
}
]
but getting this error
react_devtools_backend.js:4012 The above error occurred in the component:
and
react-dom.development.js:14887 Uncaught Error: Objects are not valid as a React child (found: object with keys {id, email, password}). If you meant to render a collection of children, use an array instead.

Like Adam said in the comments, you are trying to pack a collection of things into a tag meant for a single thing. You should iterate over the list rendering a thing for each item.
{dataFromApi.map((item, i) => <p key={i}>{item.email}</p>)}

I got the answer why i'm not getting the expected output because in this code
const submit = () => {
const data = fetch(URL, requestOptions);
data.then( (userdata) => {
return userdata.json();
}).then( (data) => {
setDataFromApi(data[0]); // this will store only one object into an array
}).catch( (err) => {
console.log(err);
})
}
here setDataFromApi(data[0]) will store only 1 object and to access the email from the object, we have to use only dataFromApi.email else dataFromApi will give only object which we can't render so that's why it is giving an error.

Trying to grab the correct post id from API in order to send message to only that post

In React Javascript - how would I send a message to a post with a specific id? Here's a sample object:
{
"success": true,
"error": null,
"data": {
"post": {
"location": "Bronx, NY",
"willDeliver": false,
"messages": [],
"active": true,
"_id": "5e8d1bd48829fb0017d2233b",
"title": "Schwinn Bicycle",
"price": "3.88",
"description": "This is a 19 speed bicycle, barely used.",
"author": {
"_id": "5e8d1a02829c8e0017c20b55",
"username": "joe1234"
},
"createdAt": "2020-04-08T00:33:24.157Z",
"updatedAt": "2020-04-08T00:33:24.157Z",
"__v": 0,
"isAuthor": true
}
}
}
I must be grabbing the id incorrectly because the message isn't sending to the right post.
I have a useState initialized with an empty string to store the post id so I can pass it into the fetch URL request.
const [postId, setPostId] = useState("");
const response = await fetch(`${API_URL}/posts/${id}/messages`
Here's the code I have so far
const sendMessage = async (token, id, content) => {
try {
const response = await fetch(`${API_URL}/posts/${id}/messages`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${token}`,
},
body: JSON.stringify({
message: {
content: content,
},
}),
});
const data = await response.json();
alert("message successfully sent");
return data;
} catch (err) {
console.error(err);
}
};
<form
name="message"
onSubmit={(event) => {
event.preventDefault();
posts.map((post) => {
setPostId(post._id);
});
}}
<label htmlFor="content">Content: </label>
<input
type="text"
name="content"
value={messageContent}
required
onChange={(event) => {
setMessageContent(event.target.value);
}}
/>
<button
onClick={() => {
sendMessage(token, postId, messageContent);
}}
>
Send
</button>
Thanks for any hints or help!

userId is not defined

So i managed to get username from a link but im unsure of how to actually get the userid back.
I want it so when it to say the username which works perfectly, but down in thumbnail when i try to fetch the userId it comes up as "userId is not defined".
I'm it sure what the solution is but I want to keep both userId and username.
here is my code!
const getUsername = userId => new Promise(resolve => {
fetch('https://users.roblox.com/v1/users/' + userId)
.then(res => res.json())
.then(body => resolve(body.name || 'Unknown'))
.catch(() => resolve('Unknown'))
})
(async () => {
const username = await getUsername(nextInQueue.offers[0].userId);
consola.success(`[${username}] has ok items`)
fetch(config.webhook, {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
"content": null,
"embeds": [
{
"title": ":tada: Trade sent to: " + username + " :tada:",
"color": 28420,
"fields": [
{
"name": "Cool Items:",
"value": itemNameList.join('\n')
},
{
"name": "Okay items:",
"value": toreceiveList.join('\n')
}
],
"author": {
"name": "Expoorttoo",
"icon_url": "https://i.pinimg.com/736x/4b/69/74/4b6974aef5d96580140ef2686072af3f.jpg"
},
"footer": {
"text": Sentto.toLocaleString() + " sent & " + tradeQueue.length.toLocaleString() + " set in queue"
},
"thumbnail": {
"url": "https://www.roblox.com/headshot-thumbnail/image?userId=" + userId + "&width=420&height=420&format=png"
}
}
]
})
})
})().catch();
}
oh yeah by the way its a webhook which it sends to on discord. It works without thumbnail but doesnt work with the thumbnail saying userid.

You are missing
const userId = nextInQueue.offers[0].userId;

Error response graph.microsoft.com/v1.0/me/manager

Look at my code, what am I doing wrong? I need to get https://graph.microsoft.com/v1.0/users/${uniqueName}/manager. But the request fails
But when I try to execute the https://graph.microsoft.com/v1.0/${uniqueName} query, everything goes well. What to fix so that the https://graph.microsoft.com/v1.0/users/${uniqueName}/manager request is successful?
fastify.post('/login', {
preHandler: (request, _, next) => {
if (!request.body || !request.body.username || !request.body.password) {
const error = new Error('Credentials are missing');
error.statusCode = 400;
return next(error);
}
return next();
},
}, async (request, reply) => {
const { username, password } = request.body;
const userData = await fastify.helpers.authentication.getUserTokens(username, password, azureConfig.CLIENT_SCOPE);
await replyWithTokens(fastify, reply, userData);
});
And next
const getUserTokens = async (username, password, scope) => {
const authUrl = `https://login.microsoftonline.com/${azureConfig.TENANT_NAME}/oauth2/v2.0/token`;
const body = {
client_id: azureConfig.CLIENT_ID,
client_secret: azureConfig.CLIENT_SECRET,
grant_type: 'password',
password,
scope,
username,
};
const authResponse = await fetch(authUrl, {
body: new URLSearchParams(body).toString(),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
method: 'POST',
});
if (!authResponse.ok) {
fastify.helpers.error.throwError(422, 'Authentication failed');
}
const result = await authResponse.json();
const decodedData = jwt.decode(result.access_token);
const uniqueName = String(decodedData.unique_name || '').toLowerCase();
const name = String(decodedData.upn || uniqueName).toLowerCase();
const agentAttributes = {};
if (!uniqueName) {
fastify.helpers.error.throwError(400, 'Unique name not found');
}
let recheckSan = true;
let san = name.split('#').shift();
let agent = await fastify.db.models.Agent.findOne({
where: { uniqueName },
});
let radId = '';
const graphAuthResponse = await fetch(authUrl, {
body: new URLSearchParams({
...body,
scope: 'email openid profile https://graph.microsoft.com/User.Read',
}).toString(),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
method: 'POST',
});
if (graphAuthResponse.ok) {
const graphAuthResult = await graphAuthResponse.json();
const { access_token: graphAccessToken = '' } = graphAuthResult;
// eslint-disable-next-line max-len
const graphResponse = await fetch(`https://graph.microsoft.com/v1.0/users/${uniqueName}/manager`, {
headers: {
authorization: `Bearer ${graphAccessToken}`,
'content-type': 'application/json',
},
});
if (graphResponse.ok) {
const graphResult = await graphResponse.json();
console.log(graphResult)
}
}
}
I want to receive such response
{
"#odata.context": "https://graph.microsoft.com/v1.0/$metadata#directoryObjects/$entity",
"#odata.type": "#microsoft.graph.user",
"id": "1111112-68cf-4896-b2d0-13b5c6264113",
"businessPhones": [
"111 111 11111"
],
"displayName": "Wer, John",
"givenName": "John",
"jobTitle": "SENIOR DEVELOPMENT ARCHITECT",
"mail": "somemail#mail.com",
"mobilePhone": "111 111 1111",
"officeLocation": "Atlanta",
"preferredLanguage": null,
"surname": "John",
"userPrincipalName": "somemail#mail.com"
}
But I get such an error response. What am I doing wrong? Thanks!
{
"error": {
"code": "Authorization_RequestDenied",
"message": "Insufficient privileges to complete the operation.",
"innerError": {
"date": "2022-01-14T20:40:30",
"request-id": "9e2b5937-4bd0-4fdb-a1ae-1b22cef09772",
"client-request-id": "9e2b5937-4bd0-4fdb-a1ae-1b22cef09772"
}
}
}

To get the managers of other users in your organization on your behalf, you need to have User.Read.All delegated permission
Once the permission is assigned, admin consent needs to be granted for the same.
Then you would be able to fetch the managers info of other users in your organization
You can test the same in Graph Explorer first. If it is successful, you can make the changes accordingly in your JavaScript code

How to do multiple nested query (GET request) with GraphQL Yoga?

How can I do multiple nested query using GraphQL Yoga?
This is my data
{
"user": [{
"id": 1,
"name": "Thomas",
"comment_id": [1, 2, 3]
},
{
"id": 2,
"name": "Riza",
"comment_id": [4, 5, 6]
}
],
"comment": [{
"id": 1,
"body": "comment 1"
},
{
"id": 2,
"body": "comment 2"
},
{
"id": 3,
"body": "comment 3"
}
]
}
The scenario is that I want to query a particular user with all its comments, but the user only stores the comment ids.
This is my code
const { GraphQLServer } = require('graphql-yoga');
const axios = require('axios');
const typeDefs = `
type Query {
user(id: Int!): User
comment(id: Int!): Comment
}
type User {
id: Int
name: String
comment: [Comment]
}
type Comment {
id: Int
body: String
}
`;
const resolvers = {
Query: {
user(parent, args) {
return axios
.get(`http://localhost:3000/user/${args.id}`)
.then(res => res.data)
.catch(err => console.log(err));
},
comment(parent, args) {
return axios
.get(`http://localhost:3000/comment/${args.id}`)
.then(res => res.data)
.catch(err => console.log(err));
},
},
User: {
comment: parent =>
axios
.get(`http://localhost:3000/comment/${parent.comment_id}`)
.then(res => res.data)
.catch(err => console.log(err)),
},
};
const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log('Server is running on localhost:4000'));
Desired Query
{
user(id: 1) {
id
name
comment {
id
body
}
}
}
But it returns not found, because the endpoint that the axios hit is http://localhost:3000/comment/1,2,3'
How can i make it return all user's comments?
Thanks guys!

Assuming that comments API /comment/:id accepts only single id, you would need to make one API call per comment ID (unless there is an API which takes multiple ID's and return their data) and then return response from comment field resolver of User type.
This is how resolver for comment field would look like in that case:
User: {
comment: parent => {
let results = await Promise.all(parent.comment_id.map((id) => axios.get(`http://localhost:3000/comment/${id}`)))
return results.map((result) => result.data)
}
}

Apparently I also found this other solution
User: {
comment: parent =>
parent.comment_id.map(id =>
axios.get(`http://localhost:3000/comment/${id}`).then(res => res.data)
),
},
Performance wise, which one do you think it's better?