Инициализация магазина Mobx с вызовом API в NextJS - PullRequest
Новая
       37

Инициализация магазина Mobx с вызовом API в NextJS

0 голосов
/ 26 ноября 2018

Я следую примеру NextJS + MOBX , но я не могу заполнить магазин моим API-вызовом.

Мне кажется, что следующий раздел HOC нена самом деле, дождитесь разрешения getInitialProps для страницы, прежде чем продолжить выполнение: 

if (typeof App.getInitialProps === "function") {
            appProps = await App.getInitialProps.call(App, appContext)
        }

Чтобы быть более точным, выполнение продолжается несмотря на состояние await и инициализирует хранилище с ничем, вместо ожидания данных API.прежде чем продолжить.

Я также могу сказать это из-за различных операторов console.log, которые производят следующий вывод - я могу видеть, что инициализация HOC (и, следовательно, хранилища) завершается до того, как запрос API завершен вGetInitialProps страницы. 

HOC initial props
Page initial props started
HOC initial props complete
HOC constructor
Page initial props complete

Есть идеи, что я здесь не так делаю?

getInitialProps и экспорт страницы индекса: 

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)))

Храните метод, который вызывает apiи заполнил хранилище: 

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: 

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 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
        }
    }
...