0

I need to poll the data until the response.Status === 'UpdatesComplete'. I have written this node js API function which basically polls the data -

const getResults = async (location) => {
  try {
    const response = await poll(location);
    if (response.Status && response.Status === 'UpdatesComplete') {
      return response;
    }
    return await getResults(location);
  } catch (err) {
    throw err;
  }
};

app.get('/url', async (req, res) => {
  try {
    const results = await getResults(req.query);
    res.json(formatData(results));
  } catch (err) {
    res.status(500).send(err);
    console.error(err);
  }
});

I am calling this API from ReactJS class component inside ComponentDidMount lifecycle method -

componentDidMount = () => {
    axios.get('url', {
      params: params
    })
    .then(response => {
      console.log(response.data, 'data');
      // setting the data on state
      this.setState({ filteredList: response.data });

    })
    .catch(err => {
      this.setState({ error: true });
    });
  };

This is working fine. But since the API is returning data till all the data has been fetched(after doing polling), it's taking a very long time on view to load the data. I am basically looking for returning the polling data to view as soon as the data fetched and simultaneously polling the API until all the data has been fetched. In this case, data will keep on updating after each polling on the view which will improve the user experience. Thanks in advance.

Foram Trada
  • 793
  • 2
  • 13
Neha Gupta
  • 917
  • 3
  • 16
  • 32

1 Answers1

0

You are finding the lazy loading or infinite scroll solution on the server-side. There is no simple way to do this.

The basic idea of the solution is to paginate your result with polling. ie. call url?size=2&offset=0 from the client-side. Then on the server-side just poll first 2 results and return. next time call url?size=2&offset=2 and so-on.

Herb
  • 155
  • 7