Pagination for rails api and react api

Question

I am building a web app. For that I am using rails as api for backend. Also using react for frontend. I have a model user. I would like to display all the users along with its details to the website users. So I have around 10,000 + users. So I can't send all the users atonce to the frontend. I would like to display only 50 users at a time. So to see next 50 users the frontend will send me a new request to get the next 50 users and so on. So I am not getting correct path how to build it.

Now I am fething all the users like this and my server is getting hang.

my users_controller.rb

 class UsersController < ApplicationController
    def index
      users = User.all
      render_success(:ok, users, meta: { message: 'User sucessfully send' })
    end
 end

In brief - I want to send only limited number of data to frontend in each request.

Answer 1

You can use gem 'kaminari' for pagination in rails.
Fetching users based on page number:

class UsersController < ApplicationController
def index
  per_page = PAGINATION[:users] # you can define it in app_config.yml  
  users = User.page(params[:page]).per(per_page)
  render json: { user_list: users, per_page: per_page, user_count: users.count, success: true }, status: :ok
end

end

In react you can use react-paginate to render paginate block.

You can render this in User Index screen

    renderPaginateBlock = () => {
    const { user_count, per_page } = this.props;
    if (user_count > per_page) {
      return (
        <div align='center'>
          <ReactPaginate
            previousLabel={"<"} nextLabel={">"} marginPagesDisplayed={2}
            pageRangeDisplayed={5} pageCount={this.props.user_count/this.props.per_page}
            onPageChange={(data) => this.getUserWithPagination(data.selected + 1)}
            containerClassName={"pagination custom"} subContainerClassName={"pages pagination"}
            activeClassName={"active"}
          />
        </div>
      );
    }
    else {
      return null;
    }
  }

This is to set current_page and access the API:

getUserWithPagination = (activePageNo) => {
    const { fetchUsers } = this.props;
    fetchUsers(activePageNo)
  }