Missing Pagination button React Admin

Question

I'm having a problem with my react admin pagination. I'm implementing this in my back office to approve the products of my merchants.

this is how my frontend looks

const PostPagination = props => <Pagination rowsPerPageOptions={[10, 25, 50, 100, 500]} {...props} />;

return (
    <List
        {...props}
        bulkActionButtons={<PostListBulkActions />}
        filters={<PostFilter />}
        sort={{ field: 'createdDate', order: 'DESC' }}
        exporter={exporter}
        pagination={<PostPagination/>}
    >
            <Datagrid rowClick={rowClick} expand={PostPanel} optimized>
                {/* <TextField source="_id" /> */}
                <TextField source="name" cellClassName={classes.title} />
                <TextField source="description" />
                <TextField source="category" />
                <TextField source="shop" />
                <TextField source="shopInspiration" />
                <TextField source="price" />
                <TextField source="quantity" />
                <DateField
                    source="createdAt"
                    sortByOrder="DESC"
                    cellClassName={classes.createdDate}
                />
                <BooleanField source="isArchived"/>
                <BooleanField source="isApproved" onClick={()=> {}}/>
                </Datagrid>
        </List>
    );

then on my backend

    exports.listApproval = (req, res) => {
    let order = req.query.order ? req.query.order : -1;
    let sortBy = req.query.sortBy ? req.query.sortBy : "createdAt";
    let limit = req.query._end ? parseInt(req.query._end) : 20; 
   // let limit = req.query.limit ? parseInt(req.query.limit) : 0; 

    Product.find()
        .select("-photo")
        .populate("category")
        .populate("shop")
        .sort([[sortBy, order]])
        .limit(limit)
        .exec((err, products) => {
            if (err) {
                return res.status(400).json({
                    error: "Products not found."
                });
            }
            res.set('x-total-count', products.length)
            console.log(products.length);
            res.json(products.map((p) => {

                try {
                    let {name, sold, description, price, quantity, createdAt, updatedAt, images, status, isApproved, category, isArchived, shop, imagePrimary } = p._doc;
                    return({"id": p._id, name, sold, description, price, quantity, createdAt, images, updatedAt, "category": category.name, "shop": shop.name, isApproved, status, isArchived, imagePrimary, "shopInspiration": (shop.inspiration=!''||shop.inspiration)});
                  }
                  catch (e) {
                    return({});
                  }
             }));
        });
};

when I change the variable limit to req.query.limit. it loads all products and the pagination doesn't work. but when I change it to req.query._end. it works fine but the navigation NEXT and PREVIOUS is missing.

See image below.

Answer 1

Not sure if you are still on this problem, the reason for the missing navigation NEXT and PREVIOUS is because you returned the limit as total instead of the total count, which tells RA whether there is going to be a next/previous page. If there is a total of 100 products without pagination, you should return 100 as the total.

Sample Response to RA

{
data: products,
total: 100 // total product count without pagination
... other fields
} 

Note that if total is 0, RA will trigger the empty page by default