React get request without refreshing the page - node.js

Question

I have an application where I first make a post request to an endpoint, let say;
ENDPOINT A
I have another endpoint where I make a GET HTTP request, let say;
ENDPOINT B
The issue now is how do I get the current data I posted to ENDPOINT A, from ENDPOINT B without refreshing the page.
Note: Every thing is working fine just that I need to refresh the page to see the current data I posted, which doesn't make it a reactive application.
Here is part of the code
//Get user requests
useEffect(() => {
fetch('http://localhost:3002/request/me', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': JSON.parse(localStorage.getItem("Some"))
}
}).then(function (res) {
// console.log(res)
return res.json()
}).then(function (datas) {
setState({ datas: datas })
console.log(datas)
}).catch(function (e) {
console.log(e)
})
}, [])
//Create request
const onAdd = (data) => {
fetch('http://localhost:3002/request', {
method: 'POST',
headers: {
'Authorization': JSON.parse(localStorage.getItem("Some"))
},
body: data
}).then(function (res) {
// console.log(res)
return res.json()
}).then(function (data) {
setPost({datas: data})
console.log(data)
}).catch(function (e) {
console.log(e)
})
}

Answer 1

You'll probably need to poll the server on an interval. fetch requests you only get back one response, if the data changes later you won't get any update for that update, meaning you'll need to repeat the request manually.
There are different strategies, probably the most simple one is to poll on an interval:
useEffect(() => {
const performRequest = () => fetch('http://localhost:3002/request/me', ...)
.then(...)
const token = setInterval(performRequest, 5000) // Every 5 seconds?
performRequest(); // Initial request
return () => {
// Don't forget to cleanup the interval when this effect is cleaned up.
clearInterval(token)
}
}, []);
But you can do more fancy stuff if you want more control. You could write this logic in a custom hook with the following API:
const { result, refresh } = useRequestMe()
// When needed, call refresh(). e.g. after a succesful POST request.
const onAdd = (data) => {
fetch('http://localhost:3002/request', ...)
.then(function (res) {
// console.log(res)
return res.json()
}).then(function (data) {
setPost({datas: data})
refresh();
console.log(data)
}).catch(function (e) {
console.log(e)
})
}