EDIT: I think my mistake was calling my own API like that instead of querying the MongoDB database in getStaticProps(). I refactored it this way:
export async function getStaticProps() {
await dbConnect();
const user = await User.findOne({ email: process.env.EMAIL_USERNAME })
const projects = await Project.find({})
const { description, socials, title, skills } = user;
const sortedData = skills.sort((a, b) => (a.level < b.level ? 1 : -1));
if (!user || !projects) {
return {
notFound: true,
};
}
return {
props: {
sortedData: JSON.parse(JSON.stringify(sortedData)),
description,
socials: JSON.parse(JSON.stringify(socials)),
title: title ?? '',
projects: JSON.parse(JSON.stringify(projects)),
},
revalidate: 60,
};
}
and it seems to be working. I am not sure tho if that's how it's supposed to be, or it's not a good idea to go about it this way
I have this project, and when I upload it to Vercel, I get Error: Request failed with status code 429. I just have three API calls made in getStaticProps. I don't really know what's going on since I am new to this. I saw there's a limit but it's 3 API calls? Is there anything I am missing? Also, even when there's no error, the static page doesn't refresh at all. Actually, even when I deploy it again it doesn't change which I don't understand. On my PC with the external API and the external mongoDB everything works fine.
The API link is not that one. Just using this one in development
export async function getStaticProps() {
const res = await axios.get('http://127.0.0.1:3000/api/get-skills');
const res1 = await axios.get('http://127.0.0.1:3000/api/user-info');
const res2 = await axios.get('http://127.0.0.1:3000/api/get-projects');
const {
data: { data },
} = res;
const {
data: { description, socials, title },
} = res1;
const {
data: { projects },
} = res2;
const sortedData = data.sort((a, b) => (a.level < b.level ? 1 : -1));
if (!data || !res1 || !res2) {
return {
notFound: true,
};
}
return {
props: {
sortedData: sortedData ?? [],
description: description ?? '',
socials: socials ?? [],
title: title ?? '',
projects: projects ?? [],
},
revalidate: 60,
};
}
Looks like it is a rate-limit issue. Instead of using axios in getStaticProps, use swr inside useEffect
import useSWR from "swr"
create a fetcher function:
const [firstState,setFirstState]=useState("")
const URL1='http://127.0.0.1:3000/api/get-skills'
const fetcher = async url => {
const res = await fetch(url)
const json = await res.json()
setFirstState(json)
return json ?? []
}
useEffect(()=>{
fetcher(URL1)
})