Pagination

How to use pagination mode off and list all itens of the resource

11 Replies

kapa.ai•10mo ago

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To list all items of a resource with pagination mode set to "off", you can use the useTable or useSimpleList hooks provided by Refine. Here's how you can do it:

useTable({  
 pagination: {  
 mode: "off",  
 },  
});

useTable({  
 pagination: {  
 mode: "off",  
 },  
});

useSimpleList({  
 pagination: {  
 mode: "off",  
 },  
});

useSimpleList({  
 pagination: {  
 mode: "off",  
 },  
});

When the pagination mode is set to "off", pagination is disabled and all records will be fetched. Please note that this might not be the best approach if you have a large dataset, as it could lead to performance issues. For more information, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#paginationmode) or the Refine documentation for useSimpleList (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list#paginationmode). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-whiteOP•10mo ago

@kapa.ai I did that but it only show 25 itens but the resource has 40

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The issue you're experiencing might be related to the server-side settings. Even though you've set the pagination mode to "off" on the client side, the server might still be limiting the number of items returned per request. You should check your server-side settings to ensure that it's configured to return all items when pagination is disabled. If you're using a third-party API, you might need to check their documentation or reach out to their support for assistance. If you're using a custom data provider with Refine, you might need to adjust the implementation of the getList method to ignore pagination parameters when pagination is disabled. If you're using a predefined data provider, such as @pankod/refine-strapi-v4, you might need to update to the latest version. In a recent update (https://github.com/refinedev/refine/issues/2028), Refine has added the ability to disable pagination in useTable by passing hasPagination: false. However, this property is now deprecated and you should use pagination.mode instead. Here's how you can update your packages:

npm i @pankod/refine-strapi-v4@latest @pankod/refine-antd@latest @pankod/refine-core@latest

npm i @pankod/refine-strapi-v4@latest @pankod/refine-antd@latest @pankod/refine-core@latest

And here's how you can use useTable with hasPagination: false:

const { tableProps, searchFormProps } = useTable<IUser>({
    resource: "users",
    hasPagination: false,
});

const { tableProps, searchFormProps } = useTable<IUser>({
    resource: "users",
    hasPagination: false,
});

Please note that this also disables pagination elements in <Table> of @pankod/refine-antd. For more information, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#paginationmode) or the Refine documentation for useSimpleList (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-simple-list#paginationmode). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-whiteOP•10mo ago

@kapa.ai im using strapi v4.19.0

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In Strapi v4, the default limit for the number of items returned per request is set to 25. This is likely why you're only seeing 25 items even though you've set the pagination mode to "off" in Refine. To fetch all items from a Strapi resource, you need to adjust the _limit parameter in your API request. By default, Strapi uses _limit to determine the number of items to return. If you set _limit=-1, Strapi will return all items. However, please note that this might not be the best approach if you have a large dataset, as it could lead to performance issues. If you're using the @refinedev/strapi-v4 data provider with Refine, you might need to customize it to adjust the _limit parameter when pagination is disabled. Here's an example of how you can do this:

import { StrapiV4Provider } from "@refinedev/strapi-v4";

const dataProvider = StrapiV4Provider(API_URL, axiosInstance);

dataProvider.getList = async (resource, params) => {
  if (params.pagination.mode === "off") {
    params.pagination.perPage = -1; // Fetch all items
  }

  return StrapiV4Provider.getList(resource, params);
};

<Refine dataProvider={dataProvider} />;

import { StrapiV4Provider } from "@refinedev/strapi-v4";

const dataProvider = StrapiV4Provider(API_URL, axiosInstance);

dataProvider.getList = async (resource, params) => {
  if (params.pagination.mode === "off") {
    params.pagination.perPage = -1; // Fetch all items
  }

  return StrapiV4Provider.getList(resource, params);
};

<Refine dataProvider={dataProvider} />;

Please replace API_URL and axiosInstance with your actual API URL and Axios instance. For more information, you can refer to the Refine documentation (https://refine.dev/docs/data/hooks/use-table#paginationmode) or the Strapi documentation (https://docs.strapi.io/developer-docs/latest/developer-resources/database-apis-reference/rest-api/pagination.html#limit). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

wise-whiteOP•10mo ago

@kapa.ai theres a way to define to adjust the _limit to 35 inside the code below? useTable<IProInvoiceItens, HttpError, { proinvoice_id: string }>({ resource: "proinvoice-itens", filters: { initial: [ { field: "proinvoice_id.id", value: params.id, operator: "contains", }, { field: "createdAt", value: [], operator: "between" }, ], }, meta: { populate: ["rqp_produto_id", "proinvoice_id","updatedPor", "createdPor"], }, pagination: {
mode: "off",
}, });

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To adjust the _limit to 35 in your useTable hook, you can modify the perPage property in the pagination object. However, please note that this is not directly supported by the useTable hook in Refine. You would need to customize your data provider to support this feature. Here's an example of how you can do this:

import { StrapiV4Provider } from "@refinedev/strapi-v4";

const dataProvider = StrapiV4Provider(API_URL, axiosInstance);

dataProvider.getList = async (resource, params) => {
  if (params.pagination.mode === "off") {
    params.pagination.perPage = 35; // Fetch 35 items
  }

  return StrapiV4Provider.getList(resource, params);
};

<Refine dataProvider={dataProvider} />;

import { StrapiV4Provider } from "@refinedev/strapi-v4";

const dataProvider = StrapiV4Provider(API_URL, axiosInstance);

dataProvider.getList = async (resource, params) => {
  if (params.pagination.mode === "off") {
    params.pagination.perPage = 35; // Fetch 35 items
  }

  return StrapiV4Provider.getList(resource, params);
};

<Refine dataProvider={dataProvider} />;

In your useTable hook, you can then set the pagination mode to "off":

useTable<IProInvoiceItens, HttpError, { proinvoice_id: string }>({
  resource: "proinvoice-itens",
  filters: {
    initial: [
      {
        field: "proinvoice_id.id",
        value: params.id,
        operator: "contains",
      },
      { field: "createdAt", value: [], operator: "between" },
    ],
  },
  meta: {
    populate: ["rqp_produto_id", "proinvoice_id","updatedPor", "createdPor"], 
  },
  pagination: {  
    mode: "off",  
  }, 
});

useTable<IProInvoiceItens, HttpError, { proinvoice_id: string }>({
  resource: "proinvoice-itens",
  filters: {
    initial: [
      {
        field: "proinvoice_id.id",
        value: params.id,
        operator: "contains",
      },
      { field: "createdAt", value: [], operator: "between" },
    ],
  },
  meta: {
    populate: ["rqp_produto_id", "proinvoice_id","updatedPor", "createdPor"], 
  },
  pagination: {  
    mode: "off",  
  }, 
});

kapa.ai•10mo ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below

Pagination

Did you find this page helpful?