In my app, I am trying to do a fetch request, save the incoming json array in state, and display this data in a table. This functionality works completely fine when the number of json objects in the array is about 200. However this array size can increase in size depending on filters selected in the app. When this array is over 600 for example, the request will hang and eventually will fail to return anything, giving error 502. Keep in mind, the data is received and displayed as it should if the array is smaller.

    fetch(URL, {
      headers: {
        "accept": "*/*",
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify(searchBody),
    })
    .then(response => response.json())
    .then(data => {
      console.log(data)
      setSearchData(data);
    },
    (error) => {
      NotificationManager.error("Search Error");
      console.log(error)
  });

The above is the fetch request. I first tried to fix this by adding pagination to the table, however the error doesnt seem to be with the displaying but the response itself, as nothing is returned after sending the fetch. I cannot seem to find clear answers as how to limit the size of incoming response in chunks if that will solve the issue. Any help is greatly appreciated :)