CODEWITHSUNDEEP
reactjsdynamicnext.js
FrontEndDev
FrontEndDev

Reputation: 58

NextJS Dynamic Rendering

Long time developer finally picking up Next.js, so I know this is probably going to boil down to something silly. Here goes. What's wrong with my getStaticPaths() value here? It seems like I've formatted it exactly as the docs require. (Value being assigned to paths is console.log()'d in the terminal window)

enter image description here

export const getStaticPaths = async () => {
    const paths = getEvents();
    return {
        paths,
        fallback: false
    };
};

And the getEvents() function:

export const getEvents = () => {
    axios.post(`${globals.api_endpoint}getEvents.php`, {
        action: 'getStaticPaths'
    }).then((r) => {
        if (!r.data.error) {
            const paths = r.data.map(index => {
                return {
                    params: {
                        id: index.event_id
                    }
                };
            });
            console.log(paths);
            return paths;
        }
    });
};

Upvotes: 0

Views: 836

Answers (2)

FrontEndDev
FrontEndDev

Reputation: 58

Gorgeous. Thanks, @krybinski for the help. Of course it's returning a promise. The mistake wasn't quite as silly as I expected, but something simple, for sure.

export const getEvents = async () => {
    return axios.post(`${globals.api_endpoint}getEvents.php`, {
        action: 'getStaticPaths'
    });
};


export const getStaticPaths = async () => {
    const response = await getEvents();
    const paths = response.data.map(event => {
        return {
            params: {
                id: event.event_id
            }
        }
    });
    return {
        paths,
        fallback: false
    };
};

Upvotes: 0

krybinski
krybinski

Reputation: 79

The getStaticPath is an async function. If you're doing something like this paths will always be a Promise here.

const paths = getEvents();
return {
    paths,
    fallback: false
};

You should use an await keyword here to wait for the results:

const paths = await getEvents();

and in the getEvents function you should return all the axios.post call, like so:

return axios.post(`${globals.api_endpoint}getEvents.php`, {...

Additionally, I don't know how your api endpoint looks but the api path should look like this: ${globals.api_endpoint}/getEvents.php. Your api endpoint shouldn't have the slash at the end.

Upvotes: 1

Related Questions