CODEWITHSUNDEEP
reactjsnext.js
Sachin
Sachin

Reputation: 211

getStaticProps returns data not defined In nextjs

I want to fetch single data by id and I am using getStaticPaths and getStaticProps but I am getting the error data is not defined. Where am I going wrong Please help

My [id].tsx file

import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import EditProject from "../../components/EditProjectForm";

// HOW MANY HTML PAGES NEEDS TO BE MADE BASED ON OUR DATA
export const getStaticPaths = async () => {
    const response = await fetch(`http://b560-45-248-23-129.ngrok.io/projects`)
    const data = await response.json()
    console.log(data)
    const path = data.result.map(project => {
        return{
            params: {id:project.project_ID}
        }
    })
    return{
        paths:path,
        fallback: false
    }
}
// FETCH SINGLE DATA
export const getStaticProps = async (context) => {
    const id = context.params.id
    const response = await fetch(`http://b560-45-248-23-129.ngrok.io/projects/${id}`)
    // Single Object
    const data = await response.json()
    return{
        props: {fetchedData:data},
    }
}

const EditForm = () => {
    return(
        <MainComponentLayout ComponentToRender = {<EditProject fetchedData = {fetchedData}/>}/>
    )
}


export default EditForm

Upvotes: 1

Views: 2126

Answers (2)

MarioG8
MarioG8

Reputation: 5951

If You want to use props {fetchedData:data} in your app, You need pass them to the page component as props. As we can read in docs:

props - An optional object with the props that will be received by the page component. It should be a serializable object

Here You have example page with getStaticProps() correctly used.

and Your code with props, Good Luck ! ;-)

import MainComponentLayout from "../../components/Layout/MainLayoutComponent";
import EditProject from "../../components/EditProjectForm";

const EditForm = ({ fetchedData }) => {
  return (
    <MainComponentLayout
      ComponentToRender={<EditProject fetchedData={fetchedData} />}
    />
  );
};

// FETCH SINGLE DATA
export const getStaticProps = async (context) => {
  const id = context.params.id;
  const response = await fetch(
    `http://b560-45-248-23-129.ngrok.io/projects/${id}`
  );
  // Single Object
  const data = await response.json();
  return {
    props: { fetchedData: data },
  };
};

// HOW MANY HTML PAGES NEEDS TO BE MADE BASED ON OUR DATA
export const getStaticPaths = async () => {
  const response = await fetch(`http://b560-45-248-23-129.ngrok.io/projects`);
  const data = await response.json();
  console.log(data);
  const path = data.result.map((project) => {
    return {
      params: { id: project.project_ID },
    };
  });
  return {
    paths: path,
    fallback: false,
  };
};

export default EditForm;

Upvotes: 0

MattC
MattC

Reputation: 63

Change const EditForm = () => { to const EditForm = ({fetchedData}) => and it will work.

The getStaticProps, as its name implies, passes the fetched props object to the function as properties. You need to define them in the function as an object, and you can also destructure as in the example above, basically defining a fetchedData variable.

Upvotes: 1

Related Questions