Updating Graph on Interval on React

Question

I am getting data from my database to display it on the graph. Currently, I will have to refresh the page for the graph to update. I would like to refresh the graph in x interval as my data will be inserted at x interval. Am using ant design for the graph plotting. I am using a 'home' to display my graph and another class for my data fetching.

Home.js

export class Home extends Component {
  static displayName = Home.name;

  render () {
    return (
      <div>
        <h1>Dashboard</h1>
        <h2>
        <div className="site-card-wrapper">
    
      Graph1
      <Graph />}

  </div>
        </h2>
      </div>
    );
  }
}

Temp.js

const TempGraph = () => {

 const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
      fetch('link')
      .then((response) => response.json())
      .then((json) => setDatajson))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
    const config = {
        data,
        xField: 'time',
        yField: 'value',
        seriesField:'location',
        xAxis: {
          title: {
          text: 'Hours',
          }
        },
        yAxis:{
            title:{
            text: 'Temperature in °',
          }
        },
        
        meta: {
          time: {
            alias: 'hours',
    
          },
          value: {
            alias: 'temperature',
            max: 50,
          },
        },
    
      };
     return <Line {...config} />;
}
export default TempGraph;

Answer 1

You could just add a setInterval in your useEffect to grab the data and update them again. Don't forgot to clear the interval on return:

useEffect(() => {
   const interval = setInterval(() => asyncFetch(), 5000)
   return () => clearInterval(interval)
}, []}

This example triggers every 5000ms, change the value according to your needs.