I’m trying to fetch workout information from MongoDB in my React app, but I’m encountering an issue. While everything works correctly using Postman, the data doesn’t seem to be retrieved in the client-side code. I’ve already added a proxy configuration to my package.json file to point to the correct server port (http://localhost:5000). Here’s the relevant code from both the client and server side
import { useEffect, useState } from "react";
import DateDetails from "../components/DateDetails"
const Home = () => {
const [dates, setDates] = useState(null);
useEffect(() => {
const fetchDate = async () => {
const response = await fetch('/api/calen');
const json = await response.json();
console.log(json); // Log the JSON response
if (response.ok) {
setDates(json);
}
};
fetchDate();
}, []);
return (
<div className="home">
<div className="workouts">
{dates && dates.map(date => (
<DateDetails date={date} key={date._id} />
))}
</div>
</div>
);
};
export default Home;
from the side of the server when i try with postman everything work correctly
i event add a proxy to my package to get the correct port
"name": "front",
"version": "0.0.0",
"private": true,
"proxy": "http://localhost:5000",
"type": "module",
there is from the side of my server
require('dotenv').config()
const express = require('express')
const mongoose = require('mongoose')
const routel = require('./routes/route')
//express app
const app = express()
// middleware
app.use(express.json())
app.use((req, res,next) => {
console.log(req.path, req.method)
next()
})
//routes
app.use('/api/calen',routel)
//connect to db
mongoose.connect(process.env.MONGO_URI)
.then(()=>{
app.listen(process.env.PORT, () => {
console.log('listen on port 5000')
})
})
.catch((error)=>{
console.log(error)
})
when fetch is launch i only get the data from the port of the react not from the server