CODEWITHSUNDEEP
reactjsaxios
İsmail DERVİŞOĞLU
İsmail DERVİŞOĞLU

Reputation: 385

Axios auto refresh every 60 seconds with Reactjs

I'm using ReactJS as a javascript library and I am getting the data in componentDidMount() using axios. These received data must be taken again every 60 seconds. What is the most efficient and good way to do this?

componentDidMount() {
  const newGteeChartSeries = [];
  const newGteeChartCategories = [];
  const newmultiSelectOption = [];

  axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
    this.state.gteeChartSeries.map(() => {
      const data = [];

      res.data.map((item, index) => {
        data.push(item.gtee);
        newGteeChartCategories.push(item.isyeri);
        newmultiSelectOption.push({ id: item.id, isyeri: item.isyeri });
      });
      newGteeChartSeries.push({ name: "GTEE", data });
    });

    this.setState({
      teeTableData: res.data,
      gteeChartSeries: newGteeChartSeries,
      multiSelectOptions: newmultiSelectOption,
      gteeChartoptions: {
        ...this.state.options,
        xaxis: {
          categories: newGteeChartCategories
        }
      }
    });
  });
}

Upvotes: 7

Views: 12637

Answers (4)

ProblemsEverywhere
ProblemsEverywhere

Reputation: 547

You can wrap all in a function. Call that function in ComponentDidMount(), and use setInterval(myFunction(), 60000) to call that function every 60 seconds

Below works without syntax error.Call that function without parenthesis 

``componentDidMount() {
    this.interval = setInterval( this.props.Details, 6000);
    this.props.Details()
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }``

Upvotes: 1

Pranav Ramachandran
Pranav Ramachandran

Reputation: 497

Well let's do that with a normal javascript setTimeInterval.

let intervalLoop = null; // a class variable
componentDidMount() {
  const newGteeChartSeries = [];
  const newGteeChartCategories = [];
  const newmultiSelectOption = [];
  
  this.intervalLoop = setInterval(()=>{
  axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
    this.state.gteeChartSeries.map(() => {
      const data = [];

      res.data.map((item, index) => {
        data.push(item.gtee);
        newGteeChartCategories.push(item.isyeri);
        newmultiSelectOption.push({
          id: item.id,
          isyeri: item.isyeri
        });
      });
      newGteeChartSeries.push({
        name: "GTEE",
        data
      });
    });

    this.setState({
      teeTableData: res.data,
      gteeChartSeries: newGteeChartSeries,
      multiSelectOptions: newmultiSelectOption,
      gteeChartoptions: {
        ...this.state.options,
        xaxis: {
          categories: newGteeChartCategories
        }
      }
    });
  });
  }, 60000);
}
// need to cleanup the timeinterval whenever we destroy the component
componentWillUnmount(){
clearInterval(this.intervalLoop)
}

Upvotes: 0

Tholle
Tholle

Reputation: 112797

One way of going about it is to move the data fetching logic to a separate method and create an interval that will invoke this method every 60 seconds.

Make sure you store the number returned from setInterval on the component instance so you can use clearInterval in componentWillUnmount.

Example

class MyComponent extends React.Component {
  interval = null;

  componentDidMount() {
    this.interval = setInterval(this.getData, 60000);
    this.getData();
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  getData = () => {
    const newGteeChartSeries = [];
    const newGteeChartCategories = [];
    const newmultiSelectOption = [];

    axios.get(`http://www.xxxxxxx:xxxx/api/groupdata`).then(res => {
      this.state.gteeChartSeries.forEach(() => {
        const data = [];

        res.data.forEach((item, index) => {
          data.push(item.gtee);
          newGteeChartCategories.push(item.isyeri);
          newmultiSelectOption.push({ id: item.id, isyeri: item.isyeri });
        });
        newGteeChartSeries.push({ name: "GTEE", data });
      });

      this.setState({
        teeTableData: res.data,
        gteeChartSeries: newGteeChartSeries,
        multiSelectOptions: newmultiSelectOption,
        gteeChartoptions: {
          ...this.state.options,
          xaxis: {
            categories: newGteeChartCategories
          }
        }
      });
    });
  };
}

Upvotes: 7

KornholioBeavis
KornholioBeavis

Reputation: 2442

I would suggest abstracting the api request into its own function

componentDidMount(){
 setInterval(yourApiCallFn(),60000)
}

Upvotes: 1

Related Questions