Question

175

How to pass data fetched in _app.js to a component

rated 0 times [ 178] [ 3] / answers: 1 / hits: 7612 / 4 Years ago, thu, april 30, 2020, 12:00:00

In my nextjs project, I have the Layout component that needs api call. Instead of calling api calls in every pages(./pages/*), I'd like to put the logic in some global space. I researched a bit, and it looks like overriding _app.js is the way to go indicated in nextjs documentation(https://nextjs.org/docs/advanced-features/custom-app).

I have laid out code as below. But it doesn't seem to work.

./pages/_app.js

function MyApp({ Component, appProps, results }) {



  return (

    <Layout {...results}>

      <Component {...appProps} />

    </Layout>

  )

}



MyApp.getInitialProps = async (appContext) => {

  const appProps = await App.getInitialProps(appContext)

  const results = await getResults()  //api call



  return { appProps, results }

}

./components/Layout.js

const Layout = ({ children, results }) => {



  return (

    <React.Fragment>

      <Header/>

      <div className='row col-md-8 offset-md-2'>

        {JSON.stringify(results)} //results is nothing here

        <div className='col-md-9'>

          {children}

        </div>

      </div>

    </React.Fragment>

  )

}

./pages/index.js

...

return (

    <>

      {head()}

      <Layout>

        <div className='row col-md-12'>

          {showContents()}

        </div>

      </Layout>

    </>

  )

I'm sure I'm missing some obvious things. Any help would be appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 Convert a Buffer Array into an image

Fri, Mar 27, 20, 00:00, 4 Years ago

View All

answered 4 Years ago mckenna · Accepted Answer

Unless you're intending to have that page return similar results every time, you should migrate your api call on the client side. Next.JS has moved away from getInitialProps in favour of getStaticProps (fetch static data), getStaticPaths (pre-render a set of static pages) and getServerSideProps (this is probably closest to getInitialProps, fetching data on the server-side). More info on next.js data fetching here: https://nextjs.org/docs/basic-features/data-fetching

Now to answer your question based on the code you provided

// index.js

<Layout> <- you're not passing any props here.

It should prop the results down like so:

// index.js

function Page({ results }){

  return <Layout results={results}>Hello</Layout>

}

With the client-side example, you can do something like

import { useState } from 'react'



function useCats(){

  const [cats, setCats] = useState()

  useEffect(() => {

    fetch('https://test.api/cats')

      .then(response => response.json())

      .then(_cats => setCats(_cats));

  }, [])



  return cats

}



// then in another component



function CatsList(){

  const cats = useCats();

  if(!cats){

    return <p>Loading</p>

  }



  return <div>

    {cats.map(cat => <p key={cat.id}>Cat: {cat.name}</p>)}

  </div>

}