CODEWITHSUNDEEP
node.jsreactjspollingajax-polling
Neha Gupta
Neha Gupta

Reputation: 1067

How to returned poll data after each nodejs api call to reactjs component

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.

Upvotes: 0

Views: 155

Answers (1)

Herb
Herb

Reputation: 325

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.

Upvotes: 0

Related Questions