0
The value being returned from my getStaticProps in nextjs is undefined. I tried fetching data from a graphql endpoint and the return value was undefined when I console.log the value. This is the code block
const graphQuery = new GraphQLClient(url);
export const getStaticProps = async () => {
const { course } = await graphQuery.request(QUERY);
return {
props: {
course,
}
};
};
const CourseList = ({ course }) => {
console.log("course > ", course);
return (
<>
<div></div>
</>
)
};
export default CourseList;
I also tried just declaring a value in getStaticProps and returning it but it still shows undefined when i console log
const graphQuery = new GraphQLClient(url);
export const getStaticProps = async () => {
const course = "Mathematics";
return {
props: {
course,
}
};
};
const CourseList = ({ course }) => {
console.log("course > ", course);
return (
<>
<div></div>
</>
)
};
export default CourseList;
I’ve run this exact code block on a separate nextjs project and it worked so I’m wondering if something has changed with getStaticProps.
1 Answer
Reset to default
-1
Did you fix this issue yet? I am having the exact same problem. As far as I can tell, the entire getStaticProps function is not being run, as putting a console.log inside of it doesn’t print either.
EDIT: Ok so I found out what was wrong for me, and I assume you too.
getStaticProps does not work when you use the app router; it only works with the pages router. When using the app router, everything inside the app directory gets preloaded, so you should be able to do
const CourseList = async () => {
const course = await graphQuery.request(QUERY);
console.log("course > ", course);
return (
<>
<div></div>
</>
)
};
export default CourseList;
As long as your CourseList is inside the app directory, it should all be rendered server side
Not the answer you're looking for? Browse other questions tagged
or ask your own question.
or ask your own question.
|