We Keep Coding

Cloud Function returns undefiend when using POST

I am trying to send the param name in the Cloud Function managed by Firebase using POST method, I've read quite a few documentation, and no matter what I try it always returns undefined. Also is it safe to use this for sensitive data?
Client-Side
fetch(`https://<<APP-NAME>>.cloudfunctions.net/addCardForExistingCustomer`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
JSON.stringify(body: {'name': 'Name'})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(err => console.error(err));
Server-side (Firebase Cloud-Functions)
exports.addCardForExistingCustomer = functions.https.onRequest(async (request, response) => {
let name = await request.body.name
response.json({
response: `${name}`
})
})

Get response.data from fetch() as variable to use in React-Native

I've seen several posts about this, so I apologize if it's a direct duplicate. The examples I've seen have the RN components built with classes. I'm using functions, and I'm new, so it's all very confusing.
const getFlights = async () => {
const token = await getAsyncData("token");
instance({
method: "get",
url: "/api/flights/",
headers: {
Authorization: `Token ${token}`,
},
})
.then(function (response) {
// console.log(response.data.results); // shows an array of JSON objects
return response.data.results; // I've also tried response.data.results.json()
})```
I just want the response returned as a variable that I can use to populate a FlatList component in RN.
const FlightListScreen = () => {
const [list, setList] = useState([]);
const flights = getFlights(); // currently returns as a promise object
Thank you for your help.

I think you have to store the response object directly to the json method. And then with that response you can store it to the variable
.then(response => { return response.json() })
.then(response => {
this.setState({
list: response
})

you are sending token without a bearer. Concrete your token with bearer like this
headers: {
Authorization: "Bearer " + token,
},
and another thing is your response class are not right this should be like this
.then((response) => response.json())
.then((responseJson) => {
API will Resopne here....
}
this is a complete example to call API with Token
fetch("/api/flights/", {
method: "GET",
headers: {
Authorization: "Bearer " + token,
},
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
setState(responseJson.VAlue);
})
.catch((error) => {
alert(error);
});

Passing in an array value into JSON format

I am creating an email app that sends messages to other people. Currently, I have it working except for the recipients column. Right now, I hard-coded an email into the recipients column to get it working. The reason is, is the recipients field is supposed to be an array.
What's the best way of passing a value from a user form (multiple addresses separated by commas) into JSON format?
Below is how I have it now.
Thanks!
const element = document.getElementById('sendEmail');
element.addEventListener('click', function() {
fetch('/emails', {
method: 'POST',
body: JSON.stringify({
recipients: 'card51short#gmail.com',
subject: document.querySelector('#compose-subject').value,
body: document.querySelector('#compose-body').value
})
})
.then(response => response.json())
.then(result => {
// Print result
console.log(result);
});
});
}

const element = document.getElementById('sendEmail');
element.addEventListener('click', function() {
const emailsFromForm = [ // NEW
document.querySelector('#email1').value, // NEW
document.querySelector('#email2').value // NEW
] // NEW
fetch('/emails', {
method: 'POST',
body: JSON.stringify({
recipients: emailsFromForm, // EDITED
subject: document.querySelector('#compose-subject').value,
body: document.querySelector('#compose-body').value
})
})
.then(response => response.json())
.then(result => {
// Print result
console.log(result);
});
});
}

How to re-render component with react hooks

I'm completely new to React and I'm trying to use the React Hooks. I have a functional based component and I'm using the useState and useEffect to get users from my database and display them in a table.
Now, I also have a delete button for each row of my table. When I click on the delete button, I execute a delete function which deletes the data from my database. This works well. However, the table is not updated unless I refresh the whole page completely.
How can I update (re-render) my users table once the delete is done.
Below is a snippet of my code:
const [users, listUsers] = React.useState([]);
React.useEffect(() => {
axios
.get(GET_URL)
.then(res => {
console.log(res.data);
listUsers(res.data);
})
.catch(err => console.log(err));
}, []);
const deleteUser = async id => {
await fetch(DELETE_URL, {
//JSon message
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: id
})
})
.then(response => response.text())
.then(responseJson => {
console.log(JSON.stringify(responseJson));
})
.catch(error => {
console.error(error);
});
alert('User Deleted.');
};

You are not updating your list of users state once deletion You have update your list of users state. You can do this by:
const deleteUser = async id => {
await fetch(DELETE_URL, {
//JSon message
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_id: id
})
})
.then(response => response.text())
.then(responseJson => {
console.log(JSON.stringify(responseJson));
})
.catch(error => {
console.error(error);
});
const usersUpdated = users.filter(p => p.id !== id); //Filter your list of users and remove the one for the specific id
listUsers(usersUpdated); //This updates your state
alert('User Deleted.');
};
;)

Node Fetch Post Request using Graphql Query

I'm trying to make a POST request with a GraphQL query, but it's returning the error Must provide query string, even though my request works in PostMan.
Here is how I have it running in PostMan:
And here is the code I'm running in my application:
const url = `http://localhost:3000/graphql`;
return fetch(url, {
method: 'POST',
Accept: 'api_version=2',
'Content-Type': 'application/graphql',
body: `
{
users(name: "Thomas") {
firstName
lastName
}
}
`
})
.then(response => response.json())
.then(data => {
console.log('Here is the data: ', data);
...
});
Any ideas what I'm doing wrong? Is it possible to make it so that the body attribute I'm passing in with the fetch request is formatted as Text like I've specified in the PostMan request's body?

The body is expected to have a query property, containing the query string. Another variable property can be passed as well, to submit GraphQL variables for the query as well.
This should work in your case:
const url = `http://localhost:3000/graphql`;
const query = `
{
users(name: "Thomas") {
firstName
lastName
}
}
`
return fetch(url, {
method: 'POST',
Header: {
'Content-Type': 'application/graphql'
}
body: query
})
.then(response => response.json())
.then(data => {
console.log('Here is the data: ', data);
...
});
This is how to submit GraphQL variables:
const query = `
query movies($first: Int!) {
allMovies(first: $first) {
title
}
}
`
const variables = {
first: 3
}
return fetch('https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr', {
method: 'post',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({query, variables})
})
.then(response => response.json())
.then(data => {
return data
})
.catch((e) => {
console.log(e)
})
I created a complete example on GitHub.