I do have a NextJS application where I make a request to the api route using fetch
const options = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(filesForImport),
};
const response = await fetch("api/import", options);
quite straightforward.
The catch here, is that the body is a "large" JSON object, with about 6500 lines (as per Postman).
This makes the request to completely hang, I don't see the api/import route to be called at all, and if I check the developer tools/Network I do see the request pending, and never resolves.
If I send a small json with 20 lines, all works as needed, so is defenetelly something with NextJS handling large JSON objects.
I did try to change the config for that route
export const config = {
api: {
bodyParser: false,
},
};
but it doesn't help.
For testing sake, the route doesn't do any logic, commented it all.
export default async (req: NextApiRequest, res: NextApiResponse) => {
console.log(99999)
try {
const files: LocalizationImportData[] = req.body;
console.log(888, files)
//await some logic here, which is commented
res.status(200).end();
} catch (err: unknown) {
if (err instanceof Error) console.error(`failed to import records: ${err.stack}`);
res.status(500).send(err);
}
};
in the case of small payloads, I do see the 99999 in the console, with large requests nothing happens.
I tried to make the requests via Postman, from Edge and Chrome browsers, all behave the same, the request just hangs forever.
The overall file size of that JSON payload is about 200kb, pretty small I'd say.
What else can be changed here?
Related
I make a call to an API using the Amplify API:
import { API } from 'aws-amplify'
await API.get('myapi', 'endpoint')
.then(data => {
// Do something here
})
When my API returns 200 and some data back, then the then body is executed successfully. The problem is, when the endpoint returns 404 (or better non-200 response), it seems like the await API.get .... is not returning and therefore the then body is never executed. I can see in the developer tools and in the Network tab that the call indeed returned a 404 error, it's just in React it never triggers the then body.
This is what the API returns:
return {
'statusCode': 404,
'headers': {
'Content-Type': 'application/json',
'Access-Control-Allow-Headers' : 'Content-Type',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET'
}
}
.then() is triggered when your request is successful and .catch() is triggered when request is rejected.
import { API } from 'aws-amplify'
await API.get('myapi', 'endpoint')
.then(data => {
// Do something here
})
.catch((err) => {
console.log(err);
});
Plus, I don't think using await along with .then() is a good practice.
.then().catch() and async/await are 2 popular ways of handling asynchronous executions.They should not be mixed with each other.
Reference link : https://www.geeksforgeeks.org/difference-between-promise-and-async-await-in-node-js/?ref=lbp
I have a request from a React frontend to a Flask backend, where the backend calculates a bunch of stuff, and then I try to return two Pandas data frames.
So basically the return of my backend looks like:
return df1.to_json(orient="records"), df2.to_json(orient="records")
My frontend fetches data by:
const [data, setData] = useState([])
function fetchData(e) {
e?.preventDefault();
POST("/data_fetch", {}).then(async (response) => {
const json = await response.json();
setData(json);
});
}
where POST is just:
function POST(path, data) {
return fetch(`${fetchUrl}${path}`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: accessToken,
},
body: JSON.stringify(data),
});
}
The issue is that this only returns the first variable, i.e. df1 from the return. And If I try to do something like:
return jsonify(df1_data=df1.to_json(orient="records"), df2_data= df2.to_json(orient="records"))
and then:
setData({df1Data: json.df1_data, df2Data: json.df2_data});
The resulting jsonified output is just formatted very badly. And if I remove the to_json() then it can't jsonify it at all.
So is there any way to fix this ? The issue is that the data frames created are based on some of the same data, which needs to be fetched from another API, so that call/calculation takes a few seconds. So if I were to split it up, and do it twice (one for each data frame), that just seems like a waste of time.
Hello I am using axios with react and and I have a problem with the first time requests. Every time my web has a full refresh then it is suppose to make two requests to the server:
to load the web global content
the child should load the current page related content
However, when I refresh the page, since the web global content is loaded in the App.js compontDidMount, then the global content is loaded, however for HomePage.js which in this case is the child component to App.js send the request in compontDidMount but checking the server logs, only the option handshake request is received and not the actual get request to get the page related content, however since am using react-router-dom's Link to navigate. If I navigate to another page then come back to home page then I get all the content since in that case the App.js compontDidMount will not be executed. could anyone help or explain why this is happening please
my hoempage.js componentDidMount
looks like this
axios.defaults.xsrfCookieName="csrftoken"
axios.defaults.headers = get_headers()
axios.get(`${API_URL}/dns/`).then(res=>{
this.setState({
top6:res.data.top,
latest:res.data.latest
})
})
my App.js componentDidMount is calling a functions in another file that uppdates redux and looks like this
componentDidMount() {
this.props.loadGlobal();
}
loadGlobal looks like this
export const getGlobal = () => {
return dispatch => {
dispatch(getGlobalStart());
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.headers = get_headers();
axios.get(`${API_URL}/api/get-global/`)
.then(res => dispatch(getGlobalSuccess(res.data)))
.catch(err => {
console.log(err.message)
dispatch(getGlobalFail(err.response.data))
}).catch(err=>{
dispatch(setAlert({ "show": true, error: true, "message":"network error fetching data, check your internet and try again or contact side admin if your network is fine"}))
});
};
};
my get_headers() looks like this
function get_headers() {
var headers = {
"Content-Type": "application/json",
};
if (localStorage.getItem('token')) {
headers = {
"Content-Type": "application/json",
"Authorization": `Token ${localStorage.getItem('token')}`,
};
}
return headers
}
i my backend am using django which fetching data from postman or even visiting the url works just fine for me
I am trying to fetch all the articles from a document in MongoDB in React. It is perfectly working in Backend with NodeJS when I tested with Postman. But in Frontend , React, I am getting empty array. How to solve this.
Server.js (Backend)
app.get('/api/articles', async (req, res)=>{
const client = await MongoClient.connect('mongodb://localhost:27017', {useNewUrlParser:true, useUnifiedTopology:true})
const db = client.db('my-blog')
const articleInfo= await db.collection('articles').find({}).toArray(function(err, result){
if (err) console.log(err)
res.status(200).send(result)
client.close()
})
})
articlePage.js (FrontEnd)
componentDidMount(){
const requestOptions = {
method: 'GET',
headers: { 'Content-Type': 'application/json' },
};
const fetchdata = fetch('/api/articles/').then(res=>res.json())
.then(data=>this.setState({articles:data}))
console.log(this.state.articles)
}
Api address is set up in package.json with proxy:http://localhost:8000
How to get the documents data from MongoDB in React?
Firstly, check if you the API call went through to the server from your React app. If it has, then check for the response code in the network. In your case, 200 is where you get the desired result from the API. If you are not getting the desired result, then check your collection and document names and also arguments your are passing in the query.
As setState is not synchronized, you have to access it in the callback.
this.setState({ articles: data }, () => {
console.log(this.state.articles)
})
I'm running into a strange issue when using Axios GET request on my TypeScript create-react-app project.
Currently, I'm running an TypeScript Express app on the back end, and I have a simple route that returns an object:
router.get('/api/current_user', (req: Request, res: Response) => {
res.send(req.user);
});
When I visit this route via URL, I can see the object perfectly fine. It is a JSON object like this:
{
"_id": "randomstring",
"googleId": "randomstring",
"username": "Alexander Le",
"__v": 0
}
Perfectly normally so far. Great. But uh oh..
When I make an Axios GET request to this route, I am always receiving an empty string as data. Here's my axios request:
export const fetchUser = () => async (dispatch: Dispatch) => {
const response = await axios.get('http://localhost:5000/api/current_user');
dispatch({
type: FETCH_USER,
payload: response
});
};
I checked my network tab and although I always get a status 200, I am always receiving an empty string as data.
To add onto this, when I change my route response from this:
router.get('/api/current_user', (req: Request, res: Response) => {
res.send(req.user);
});
to this:
router.get('/api/current_user', (req: Request, res: Response) => {
res.send('HELLO');
});
I get the'HELLO' as data. So what's preventing me from receiving the JSON object as data?
Thank you in advance!