Headers lost in chained fetch request [React-Native] - api

Question

I'm currently trying to chain API requests to retrieve user information with React Native. The problem that I am running into is that the first fetch request goes provides the response that I'm looking for, but the chained request hangs up.
I've been able to narrow this down by running the API on my machine and here's what the problem is. When the first request is made, the headers in the config object are passed through without issue. When the second request is made, the X-Tenant-Name header is passed through, but for some reason the Authorization header is lost in the process, and therefore the request fails.
Here's the function making the requests:
async componentWillMount() {
const { authToken, selectedUser, tenant } = this.props;
const config = {
method: 'GET',
headers: {
'X-Tenant-Name': tenant,
'Authorization': 'Bearer ' + authToken
}
}
await fetch(URL + '/users/' + selectedUser.id, config)
.then(response => response.json())
.then(response => {
this.setState({ user: response.data });
const children = response.data.relationships.following_tips.data;
if (children.length) {
for (let i = 0; i < children.length; i++) {
fetch(URL + '/tips/' + children[i].id, config)
.then(response => response.json())
.then(response => console.log(response))
.done();
}
}
})
.done();
}
Any ideas?

Answer 1

I think your problem is being caused because your are forgetting to pass config to the second fetch. Try this one:
async componentWillMount() {
const { authToken, selectedUser, tenant } = this.props;
const config = {
method: 'GET',
headers: {
'X-Tenant-Name': tenant,
'Authorization': 'Bearer ' + authToken
}
}
await fetch(URL + '/users/' + selectedUser.id, config)
.then(response => response.json())
.then(response => {
this.setState({ user: response.data });
const children = response.data.relationships.following_tips.data;
if (children.length) {
for (let i = 0; i < children.length; i++) {
fetch(URL + '/tips/' + children[i].id, config) //Add config to this fetch too.
.then(response => response.json())
.then(response => console.log(response))
.done();
}
}
})
.done();
}