How do I implement pagination using Strapi as backend and React.js as Frontend?

Question

So I am trying to GET customers from this endpoint in Strapi, after implementation, when I click on "Next" page, page number increases by 1 as expected, moves to next page but data array is empty and hence the inability to render data. What am I missing please?

I changed the implementation of the api integration but still not working. I am expecting that when I click on "Next" I should see the next set of data, same as "Previous".

This the code below: `

export interface CustomerPaginationProps {
    page: number
    pageSize: number
}

export const GetCustomers = async ({ page, pageSize }: CustomerPaginationProps) => {
    const response = await axiosInstance.get("customers?populate=card", {
      params: {
        "pagination[page]": page,
        "pagination[pageSize]": pageSize,
      },
    });
    return response.data;
  };

export const useGetCustomers = ({ page, pageSize }: CustomerPaginationProps) => {
    const { data, isLoading, error, refetch } = useQuery(
      ["customers", page, pageSize],
      () => GetCustomers({ page, pageSize }),
      {
        onError: (error) => {
          if (error instanceof AxiosError) {
            console.log("customers error", error);
          }
        },
      }
    );
  
    return { data, isLoading, error, refetch };
  };

import { useState } from "react";
import Table from "../../components/Table";
import DashboardLayout from "../../pages/Dashboard/DashboardLayout";
import { useGetCustomers } from "../../services/customer";
import { Button, Modal } from "flowbite-react";
import { SubmitHandler, useForm } from "react-hook-form";
import { IAddCustomerProps } from "../../types/customer-interface";

const Customers = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 25; 
  const { data: customerData, isLoading } = useGetCustomers({page: currentPage, pageSize:pageSize});

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IAddCustomerProps>();

  const totalPages = Math.ceil(customerData?.meta.pagination.total / pageSize);

  const handleNextPage = () => {
    setCurrentPage((prevPage) => prevPage + 1);
  };

  const handlePreviousPage = () => {
    setCurrentPage((prevPage) => prevPage - 1);
  };

  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const currentPageData = customerData?.data.slice(startIndex, endIndex);
  console.log("currentPageData", currentPageData)
  const columns: string[] = [
    "Name",
    "Email",
    "Birthday",
    "Phone Number",
    "Card Number",
    "Points",
  ];

  const handleModalOpen = () => {
    setModalOpen(true);
  };

  const data: any[] = currentPageData?.map((customer: any) => [
    customer.attributes.name,
    customer.attributes.email,
    customer.attributes.birthday,
    customer.attributes.tel,
    customer.attributes.card.data.attributes.number,
    customer.attributes.card.data.attributes.points,
  ]);

  console.log("data", data)

  const onSubmit: SubmitHandler<IAddCustomerProps> = (data: any) => {
    console.log(data);
    // Add your submit logic here
  };

  return (
    <DashboardLayout>
      <div>
        <div className="w-full flex justify-end my-3">
          <Button onClick={handleModalOpen} color="dark">
            Add Customer
          </Button>
        </div>
        <Modal
          onClose={() => setModalOpen(false)}
          popup
          size="md"
          show={modalOpen}
          dismissible
        >
          {/* Modal content */}
        </Modal>

        {customerData ? (
          <>
            <Table columns={columns} data={data} />
            {/* Pagination */}
            <div className="pagination text-center p-2 mt-3">
              <button
                disabled={currentPage === 1}
                onClick={handlePreviousPage}
                className="bg-gray-200 p-2 rounded-lg"
              >
                Previous
              </button>
              <span className="px-4">{`Page ${currentPage} of ${totalPages}`}</span>
              <button
                disabled={currentPage === totalPages}
                onClick={handleNextPage}
                className="bg-gray-200 p-2 rounded-lg"
              >
                Next
              </button>
            </div>
          </>
        ) : (
          <p>Loading customer data...</p>
        )}
      </div>
    </DashboardLayout>
  );
};

export default Customers;

score 0 · Answer 1 · answered Jun 10 '23 at 07:52

this looks dodgy, not sure if it’s valid:

get("customers?populate=card", {
      params: {
        "pagination[page]": page,
        "pagination[pageSize]": pageSize,
      },
    });

You normally would use qs library like this:

const query = {
  populate: {
     card: true
  },
  pagination: {
    page,
    pageSize,
  }
}

const queryString = qs.stringify(query)

const req = await axios.get(`/customers?${queryString}`)

How do I implement pagination using Strapi as backend and React.js as Frontend?

1 Answers1