How can I update my news feed after I add new post - mysql

Question

I have a react frontend app with nodejs/express and typeorm/mysql on the backend. I have built a clone of twitter's "news feed" where we can post a new tweet(article). At the top, I have an input field where user can submit new post. Once the user submits new post, he has to refresh the page in order to be able to see new post. How can I achieve 'live reload' without reloading the app or seeing the new post once it is submitted. I am using useEffect() hook and fetch to send HTTP requests to communicate with backend.
Code for fetching posts and creating new one from the homepage:
const [posts, setPosts] = React.useState([]);
const [isLoaded, setIsLoaded] = React.useState(false);
const [error, setError] = React.useState(null);
const [post, setNewPost] = React.useState("");
React.useEffect(() => {
fetch(`${serverUrl()}/posts`)
.then((res) => res.json())
.then(
(posts) => {
setIsLoaded(true);
setPosts(posts);
},
(error) => {
setIsLoaded(true);
setError(error);
}
);
}, []);
const createNewPost = async (postData) => {
return fetch(`${serverUrl()}/posts`, {
method: "POST",
// add new
headers: { "Content-type": "application/json", userid: token },
body: JSON.stringify(postData),
}).then((data) => {
return data.json();
});
};
const handleSubmit = async (e) => {
e.preventDefault();
await createNewPost({ title: "Lorem ipsum", body: post });
setNewPost("");
};

Answer 1

In the createNewPost method, after the post has been added successfully, you must push the new post to your state.
const createNewPost = async (postData) => {
return fetch(`${serverUrl()}/posts`, {
method: "POST",
// add new
headers: { "Content-type": "application/json", userid: token },
body: JSON.stringify(postData),
}).then((data) => {
// success!
setPosts([...posts, postData]);
return data.json();
});
};
But of course, postData must match the schema of a single post inside your posts array for this to work.
The best solution for this is, to have the backend return the new post as JSON object, and then update the posts array.

Answer 2

A simple workaround would be that you could just manipulate the state of your "posts" variable.
In your createNewPost, if the promise returns in success without any errors or exceptions, i.e. enters into "then" block, you can append your new post -> {title: "new post", body: post} to the already fetched "posts" variable. This way state will be updated and you will see the new post.
i.e.
let prevPosts = [...posts];
prevPosts.push(newPost);
setPosts(prevPosts); // Append at last. You can even push at first index, that way post will appear at top.
So even if you refresh, the new posts will be loaded, as you already did a create query at backend while submitting the post and later updated the post variable.