CODEWITHSUNDEEP
javascriptreactjs
yudhiesh
yudhiesh

Reputation: 6819

How to make GET request to API continuously?

I am making GET request to my database and the data is coming in and showing up, but the moment the data gets updated on my database it does not get updated on the component which uses that data.

Edit Based on the comments I need to make GET request continuously so I updated the question.

useEffect() to set the data to state

// Data for each of the tags
const [tag1, setTag1] = useState();
const [tag2, setTag2] = useState();
const [tag3, setTag3] = useState();

useEffect(() => {
    axios
        .get(URL)
        .then(res => {
            const data = res.data;
            // Passing in the setter method
            setTagDetails(data, setTag1, setTag2, setTag3);
        })
        .catch(error => {
            console.log(error);
        });
}, []);

setTagDetails() where the data coming in is split into different states to be used in the component:


// Splitting the data by each corresponding tag and adding them to their respective state
export const setTagDetails = (data, setTag1, setTag2, setTag3) => {
    const arr1 = [];
    const arr2 = [];
    const arr3 = [];
    try {
        data &&
            data.forEach(d => {
                // Entries into the database which do not have any tag information
                // have a size of 5 and those with all the details have a size of 6
                const sizeOfObject = Object.keys(d).length;
                // Only need database items with all the details
                if (sizeOfObject > 5) {
                    // Split the data for the tags into their respective name
                    const name = d["tags"]["L"][0]["M"]["name"]["S"];
                    // Will be used to set individual datasets for each tag
                    if (name === "Tag1") {
                        cleanTag(d, arr1);
                    }
                    if (name === "Tag2") {
                        cleanTag(d, arr2);
                    }
                    if (name === "Tag3") {
                        cleanTag(d, arr3);
                    }
                }
            });
        setTag1(arr1);
        setTag2(arr2);
        setTag3(arr3);
    } catch (err) {
        console.log(err);
    }
};

Upvotes: 2

Views: 2487

Answers (1)

Adam Specker
Adam Specker

Reputation: 422

When you want to execute a function every x amount of time, we use the setInterval method. It will call the passed in function (as the first argument) every x milliseconds (where x is the second argument, in the case below, 1000 ms, or 1 second).

useEffect(() => {
const interval = setInterval(() => {
   axios
    .get(URL)
    .then(res => {
        const data = res.data;
        // Passing in the setter method
        setTagDetails(data, setTag1, setTag2, setTag3);
    })
    .catch(error => {
        console.log(error);
    });
  }, 1000);
  return () => clearInterval(interval);
}, []);

Please note, it is best practice to be mindful of user's internet connections, in the case of a slow mobile network or a bandwidth limited ISP policy. There is also a danger of running the requests so close together that we introduce a race condition. Lastly, you MUST clear the interval, otherwise you will significantly hamper the performance of your app.

Upvotes: 0

Related Questions