How to fetch data from backend using axios?

Question

I have created a backend server using expressjs. I have created a frontend client using react. But I can't merge them both when am trying to get data from backend using axios am getting an error. This is my index.js from backend

const express=require("express");
const mongoose=require("mongoose");
const dotenv=require("dotenv");
const helmet=require("helmet");
const morgan=require("morgan");
const UserRoute=require("./routes/users");
const AuthRoute=require("./routes/auth");
const PostRoute=require("./routes/posts");
const cors=require('cors');
const app=express();

dotenv.config();
mongoose.connect(process.env.MONGO_URL,{useNewUrlParser: true},()=>{
    console.log("Database connected successfully!!")
});
//middleware
app.use(express.json());
app.use(helmet());
app.use(morgan("common"));
app.use(cors());
app.use("/api/user",UserRoute);
app.use("/api/auth",AuthRoute);
app.use("/api/post",PostRoute);



app.listen(8800,()=>console.log("server is running!!"));

This is my posts.js from backend server

const router = require("express").Router();
const User=require("../models/User");
const Post = require("../models/Post");
//create a post
router.post("/", async (req, res) => {
    const newPost = new Post(req.body);
    try {
        const savedPost = await newPost.save();
        res.status(200).json(newPost);
    }
    catch (err) {
        res.status(500).json(err);
    }
});
//update a post
router.post("/:id", async (req, res) => {
    try {
        const post = Post.findById(req.params.id);
        if (req.params.id === req.body.userId) {
            await post.updateOne({ $set: req.body });
            res.status(200).json("The post has been updated!");
        }
        else {
            res.status(403).json("You can update only your post!!");
        }
    }
    catch (err) {
        res.status(500).json(err);
    }
});
//delete a post
router.post("/:id/delete", async (req, res) => {
    try {
        if (req.params.id === req.body.userId) {
            await Post.findByIdAndDelete(req.params.id);
            res.status(200).json("The post has been deleted!!");
        }
        else {
            res.status(403).json("You can delete only your post!!");
        }
    }
    catch (err) {
        res.status(500).json(err);
    }
});
//get a post
router.get("/:id", async (req, res) => {
    try {
        const post = await Post.findById(req.params.id);
        res.status(200).json(post);
    }
    catch (err) {
        res.status(500).json(err);
    }

});
//like a post
router.put("/:id/like", async (req, res) => {
    try {
        const post = await Post.findById(req.params.id);
        if (!post.likes.includes(req.body.userId)) {
            await post.updateOne({ $push: { likes: req.body.userId } });
            res.status(200).json("The post has been liked");
        }
        else {
            await post.updateOne({ $pull: { likes: req.body.userId } });
            res.status(200).json("The post has been disliked");
        }
    }
    catch (err) {
        res.status(500).json(err);
    }

});
//timeline posts
router.get("/timeline/:userId", async (req, res) => {

    try {
        const currentUser = await User.findById(req.params.userId);
        const userPosts = await Post.find({userId:currentUser._id} );
        const friendPosts = await Promise.all(
            currentUser.following.map(friendId => {
               return Post.find({ userId: friendId });
            })
        );
        res.status(200).json(userPosts.concat(...friendPosts));
    }
    catch (err) {
        res.status(500).json(err);
    }
})

module.exports = router;

This is my feed.js from frontend

import "./feed.css";
import Post from "../post/Post";
import Share from "../share/Share";
import { useState } from "react";
import { useEffect } from "react";
import axios from 'axios';

export default function Feed() {
  const [posts,setPosts]=useState([]);
  const [texts,setTexts]=useState([]);
  useEffect(()=>{
    const fetchPosts=async ()=>{
      const res=await axios.get("post/timeline/63c29c2fe9a410383d4bcb98");
      console.log(res);
    };
    fetchPosts();
    
    
  },[])

  return (
    <div className="feed">
      <div className="feedWrapper">
        
        <Share/>
        {/*{Posts.map((p)=>{
          <Post key={p.id} post={p}/>
        })}*/}
      </div>
    </div>
  )
}

When I try to reload the react app it's showing this

GET http://locahost:8800/api/post/timeline/63c29c2fe9a410383d4bcb98 net::ERR_NAME_NOT_RESOLVED
dispatchXhrRequest @ xhr.js:247
xhr @ xhr.js:49
dispatchRequest @ dispatchRequest.js:51
request @ Axios.js:142
Axios.<computed> @ Axios.js:168
wrap @ bind.js:5
fetchPosts @ Feed.jsx:13
(anonymous) @ Feed.jsx:16
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Feed.jsx:15 Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}

Console Image

Answer 1

API URL is not valid, hostname should be localhost instead of locahost