reduxnext.jsnext-redux-wrapper

next-redux-wrapper Wrapper.getStaticProps not working with


This is my backend controller, I am getting the rooms data

const allRooms = catchAsyncErrors(async (req, res) => {

    const resPerPage = 4;

    const roomsCount = await Room.countDocuments();

    const apiFeatures = new APIFeatures(Room.find(), req.query)
        .search()
        .filter()

    let rooms = await apiFeatures.query;
    let filteredRoomsCount = rooms.length;

    apiFeatures.pagination(resPerPage)
    rooms = await apiFeatures.query;

    res.status(200).json({
        success: true,
        roomsCount,
        resPerPage,
        filteredRoomsCount,
        rooms
    })

})

This is my redux actions I am sending the payload and data

    export const getRooms = (req, currentPage = 1, location = '', guests, category) => async (dispatch) => {
    try {

        const { origin } = absoluteUrl(req);

        let link = `${origin}/api/rooms?page=${currentPage}&location=${location}`

        if (guests) link = link.concat(`&guestCapacity=${guests}`)
        if (category) link = link.concat(`&category=${category}`)

        const { data } = await axios.get(link)

        dispatch({
            type: ALL_ROOMS_SUCCESS,
            payload: data
        })

    } catch (error) {
        dispatch({
            type: ALL_ROOMS_FAIL,
            payload: error.response.data.message
        })
    }
}

This is my reducer function, dispatching the room data

export const allRoomsReducer = (state = { rooms: [] }, action) => {
    switch (action.type) {

        case ALL_ROOMS_SUCCESS:
            return {
                rooms: action.payload.rooms
            }

        case ALL_ROOMS_FAIL:
            return {
                error: action.payload
            }

        case CLEAR_ERRORS:
            return {
                ...state,
                error: null
            }

        default:
            return state
    }
}

Here I want to get the data using wrapper.getStaticProps but I am getting an error, but when i am using wrapper.getServerSideProps I get the data.

 export const getStaticProps = wrapper.getStaticProps(store=> async ({ req, query, })  => {
  await store.dispatch(getRooms(req, query.page, query.location, query.guests, query.category))
})

Solution

  • It seems that in ({ req, query, }) => , query is undefined.

    Going by the documentation of next, the context object for getStaticProps has no property query. It is only available in getServerSideProps.

    See also this info:

    Only runs at build time Because getStaticProps runs at build time, it does not receive data that’s only available during request time, such as query parameters or HTTP headers as it generates static HTML.