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

kyydev profile image

Mastering Data Fetching in Vue.js: Using Axios and Vuex for State Management

KyDev -

codexam profile image

Is Redux Dead? Why I Kicked Redux Out of Our SaaS App

Subham -

mfaisalkhatri profile image

Actions to be taken by a QA on finding a Critical Issue in Production

Mohammad Faisal Khatri -

nicksonsimiyu profile image

Next.js - Overview

Nickson Simiyu -