Ytukyg

I am following the Nextjs + mobx example but i cannot get the store to get populated by my api call.

It seems to me that the following section of the HOC does not actually wait for the Page's getInitialProps to resolve before continuing with the execution:

if (typeof App.getInitialProps === "function") {

            appProps = await App.getInitialProps.call(App, appContext)

        }

To be more specific, the execution continues despite the await statemtent and initialises the store with nothing instead of waiting for the api data before continuing.

I can also tell this because of the various console.logstatements which produce the following output - I can see that the HOC's (and therefore the store) initialisation finishes before the api request is completed in the Page's getInitialProps.

HOC initial props

Page initial props started

HOC initial props complete

HOC constructor

Page initial props complete

Any ideas on what i am doing wrong here?

getInitialProps and export of the index page:

Index.getInitialProps = async function(ctx) {

    console.log("Page initial props started")

    const r = await ctx.store.postStore.getQuestions()

    console.log("Page initial props complete")

    return r

}

export default WithAuth(withLayout(withStyles(styles)(Index)))

Store method that call api and populated the store:

getQuestions() {

    return apiGetQuestions().then(res => {

        // console.log("received data")

        return (

            res.data.questions.length > 0 &&

            (this.posts = res.data.questions.map(

                json => new Question(json)

            ))

        )

    })

API call function:

export const apiGetQuestions = () => {

    return fetch(`${url}/api/questions`, {

        headers: {

            "Content-Type": "application/json",

            mode: "cors",

            "Access-Control-Allow-Origin": "http://localhost:3000/"

        },

        method: "GET"

    })

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

        .catch(e => {

            throw "Unable to save record"

        })

}

getInitialProps of HOC:

    static async getInitialProps(appContext) {



        console.log("HOC initial props")

        const store = getOrCreateStore()





        appContext.ctx.store = store



        let appProps = {}

        if (typeof App.getInitialProps === "function") {

            appProps = await App.getInitialProps.call(App, appContext)

        }





        console.log("HOC initial props complete")

        return {

            ...appProps,

            initialMobxState: store

        }

    }