DEV Community

Cover image for Home.getInitialProps()" should resolve to an object. But found "undefined" instead
sayantan chakraborty
sayantan chakraborty

Posted on

Home.getInitialProps()" should resolve to an object. But found "undefined" instead

#nextjs #strapi #axios #help 


Home.getInitialProps = async ctx => {
  /*  try {

    const res = await axios.get('http://localhost:1337/api/' + 'pages');
    const Pages = res.data;
//    console.log(Pages);     
    return { Pages};
  //  return { HomeAccordition };
  } catch (error) {
    return { error };
  }
*/
  let Pages =
  "'http://localhost:1337/api/' + 'pages'";
let homeAaccorditions =
  "'http://localhost:1337/api/' + 'home-accorditions'";
let Menus =
  "'http://localhost:1337/api/' + 'menus'";

let HeroSections =
 "'http://localhost:1337/api/' + 'hero-sections'";
const requestPages = axios.get(Pages);
const requesthomeAaccorditions = axios.get(homeAaccorditions);
const requestMenus = axios.get(Menus);
const requestHeroSections = axios.get(HeroSections);

axios
  .all([requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections])
  .then(
    axios.spread((...responses) => {
      const requestPages = responses[0];
      const requesthomeAaccorditions = responses[1];
      const requestMenus = responses[2];
      const requestHeroSections = responses[3];

      // use/access the results

      console.log(requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections );
    })
  )
  .catch(errors => {
    // react on errors.
    console.error(errors);
  });

};

export default Home;
//Home.getInitialProps = getInitialProps;

looking for a easy solutions to this. i was intended to return these responses so that we can call them in a component
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli •

You have commented out the only return statement, so the function retuns undefined.

Collapse
 
cadentic profile image
sayantan chakraborty • • Edited 
Home.getInitialProps = async ctx => {
  try {
    {/*
    const res = await axios.get('http://localhost:1337/api/' + 'pages');
    const Pages = res.data;
//    console.log(Pages);     
    return { Pages};
  //  return { HomeAccordition };
  } catch (error) {
    return { error };
  }
*/}
    let Pages =
      "'http://localhost:1337/api/' + 'pages'";
   // let homeAaccorditions =
   //   "'http://localhost:1337/api/' + 'home-accorditions'";
   // let Menus =
    //  "'http://localhost:1337/api/' + 'menus'";

   // let HeroSections =
   //   "'http://localhost:1337/api/' + 'hero-sections'";
    let myimages = "'http://localhost:1337/api/pages?populate=*'";
    const requestPages = axios.get(Pages);
   // const requesthomeAaccorditions = axios.get(homeAaccorditions);
  //  const requestMenus = axios.get(Menus);
  //  const requestHeroSections = axios.get(HeroSections);
    const requestMyImages = axios.get(myimages);
    axios
      .all([requestPages, requestMyImages ]) // requesthomeAaccorditions, requestMenus, requestHeroSections])
      .then(
        axios.spread((...responses) => {
          const requestPages = responses[0];
          //  const requesthomeAaccorditions = responses[1];
          //  const requestMenus = responses[2];
          //  const requestHeroSections = responses[3];
          requestMyImages = responses[2];

          // use/access the results

          // console.log(requestPages, requesthomeAaccorditions, requestMenus, requestHeroSections);
          return { requestPages, requestMyImages }; //requesthomeAaccorditions, requestMenus, requestHeroSections };
        })

  )
  } catch (error) {
    return { error };
  }

};
Enter fullscreen mode Exit fullscreen mode

there are return statement you may see it

 return { requestPages, requestMyImages };
Enter fullscreen mode Exit fullscreen mode

even this code will not run and it will also return undefined.
i checked and posted here

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli • • Edited

that return statement is not in the body of the main function.

The try/catch statement won't catch an error that occurs in a callback.

the "callback" in the .then isn't a function, it's a statement, unless axios.spread returns a function?

Read next

moizlokhandwala09 profile image

Building Scalable Web Apps with Next.js 15: A Complete Guide to the App Router and TypeScript

Moiz Lokhandwala -

sheraz4194 profile image

Introduction to Next.js Middleware: How It Works with Examples

Sheraz Manzoor -

riyon_sebastian profile image

Building a Robust Frontend Error-Handling System with Axios and Custom Hooks

Riyon Sebastian -

rifkyalfarez profile image

How to Fetch Data Using Axios and React Query in ReactJS

Rifky Alfarez -