Clientside Pagination Total Count

Hello,

const ItemsList = () => {
  const { dataGridProps, tableQueryResult } = useDataGrid({
    resource: 'items',
    meta: {
      fields: ['id', 'name'],
    },
    pagination: {
      mode: 'client',
    },
  })

  const { data, isLoading, isError } = tableQueryResult

  const items = data?.data ?? ''

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (isError) {
    return <div>Something went wrong!</div>
  }

  if (items) {
    return (
      <div style={{ width: '100%' }}>
        <h1>Items</h1>
        <List>
          <DataGrid {...dataGridProps} columns={columns} autoHeight />
        </List>
      </div>
    )
  }
  return <></>
}

const ItemsList = () => {
  const { dataGridProps, tableQueryResult } = useDataGrid({
    resource: 'items',
    meta: {
      fields: ['id', 'name'],
    },
    pagination: {
      mode: 'client',
    },
  })

  const { data, isLoading, isError } = tableQueryResult

  const items = data?.data ?? ''

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (isError) {
    return <div>Something went wrong!</div>
  }

  if (items) {
    return (
      <div style={{ width: '100%' }}>
        <h1>Items</h1>
        <List>
          <DataGrid {...dataGridProps} columns={columns} autoHeight />
        </List>
      </div>
    )
  }
  return <></>
}

When I do client-side pagination, the total count appears as 0. It shows as 0 - 0 of 0. When I manually try to pass it, the data.length value is the same as the current page size and not the total. Does anybody have any ideas what I'm doing wrong? I tried passing more props to the useDataGrid but it still doesn't work. Thank you!

22 Replies

kapa.ai•2y ago

Hi @rev_eng_g. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like you're using the useDataGrid hook with client-side pagination. In this case, you need to make sure that you're fetching all the records and then paginating them on the client side. The total count might appear as 0 if the data is not fetched correctly. To enable client-side pagination, you should pass the pagination.mode property and set it to "client" in the useDataGrid hook, as shown in the documentation (https://refine.dev/docs/api-reference/mui/hooks/useDataGrid):

const { dataGridProps } = useDataGrid({
  // ...
  pagination: {
    mode: "client",
  },
});

const { dataGridProps } = useDataGrid({
  // ...
  pagination: {
    mode: "client",
  },
});

However, based on the provided code, it's not clear how you're fetching the data. Make sure you're fetching all the records for client-side pagination. If you still face issues, please provide more information about how you're fetching the data, and I'll try to help you further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

Omer•2y ago

Hey @salihozdemir , shouldn't we take the length of the data instead of sending 0 as the number parameter?

genetic-orange•2y ago

Hey @rev_eng_g, Which dataProvider are you using?

sensitive-blue•2y ago

@Omer @salihozdemir I am using the built-in GraphQL provider. Some additional things that might help ... I cannot go to the next page or previous page, presumably because of the above issue. I can change page size and it works fine. And if I disable pagination then I correctly get all the rows. Is there anything extra I need to add to my backend?

genetic-orange•2y ago

Can you check the ‘total’ value in ‘getList’ method when you send pagination: “client” or “off”?

sensitive-blue•2y ago

@salihozdemir - total is undefined for both client and for off. I printed out the tableQueryResult from my code above. When I do client, I still get the result correctly based on the page size (I have it set to 25 right now).

genetic-orange•2y ago

It looks like a bug, please, can you create an issue for this?

sensitive-blue•16mo ago

@salihozdemir - Apologies for missing this for many months. Do you know if the issue is fixed? If not, I will create a bug for it. CC: @Omer

genetic-orange•16mo ago

When I review it again, useDataGrid works according to total returned from dataProvider independent of pagination.mode. So, you need to make sure that the API is sending the total value. If the API is not returning a total value, you can swizzle your dataProvider and customize the getList method.

sensitive-blue•13mo ago

Hi @salihozdemir sorry to keep bringing this up but we modified our backend to return total and it didn't work. Also switched to returning count and we couldn't figure it. Because for GraphQL the base field is called data so it's not possible to have a total or count next to data. It needs to be inside data if that makes sense.

Omer•13mo ago

Hey @rev_eng_g, Can you provide an example where we can reproduce the issue? I tried it in one of our examples and couldn't replicate the issue, https://codesandbox.io/p/sandbox/awesome-varahamihira-qltqrn?embed=1&file=/src/pages/posts/list.tsx:40,24.

awesome-varahamihira-qltqrn

sensitive-blue•13mo ago

Hi @Omer - Working on an example now. Do you have a pagination.mode = server example? Specifically for GraphQL would be great but maybe with REST I can debug.

Omer•13mo ago

Yep, you can create an example through refine.new with MUI + Hasura. Here is the one I created for you: https://refine.new/preview/8f87614b-b8b0-4ae2-a630-ad3a518ffec1

Preview - refine.new - Open-source enterprise application platform ...

Enterprise-grade, production-ready, and highly scalable web apps in minutes.

sensitive-blue•13mo ago

{
    "data": {
        "inventoryCompanies": [
            {
                "id": 22,
                "name": "Logitech",
                "status": "ACTIVE",
                "archived": false,
                "numberOfItems": 2
            }
        ],
        "count": 1
    }
}

{
    "data": {
        "inventoryCompanies": [
            {
                "id": 22,
                "name": "Logitech",
                "status": "ACTIVE",
                "archived": false,
                "numberOfItems": 2
            }
        ],
        "count": 1
    }
}

Is this a valid way of returning the response from the backend? The count cannot be at the same level as data because of the GraphQL response structure. Thank you. Will get back to you soon So for Hasura I see a key in the response object blog_posts_aggregate: {aggregate: {count: 61}}. Is this specific to Hasura? How do I find the way in which I should return the count for normal GraphQL server (not Strapi, not Hasura).