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•17mo 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•17mo ago

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

Omer•17mo ago

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

conscious-sapphire•17mo ago

Hey @rev_eng_g, Which dataProvider are you using?

ratty-blush•17mo 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?

conscious-sapphire•17mo ago

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

ratty-blush•17mo 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).

conscious-sapphire•17mo ago

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

ratty-blush•14mo 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

conscious-sapphire•14mo 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.

ratty-blush•11mo 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•11mo 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

ratty-blush•11mo 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•11mo 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.

ratty-blush•11mo 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).

Omer•11mo ago

This depends on your data provider. You can make the necessary changes on it by including our GraphQL data provider into your own project with the swizzle command (https://refine.dev/docs/packages/documentation/cli/#commands)

CLI | refine

refine CLI is a command line application that allows you to interact with your refine project and perform some tasks. This includes creating a new resource, managing updates, swizzle components, and runs your project (build, start, dev).

ratty-blush•11mo ago

Ah ok. Is it required to Swizzle the Refine GraphQL data provider? So it doesn't have a "default" behaviour for count? Because we have the other CRUD operations working without Swizzle.

Omer•11mo ago

After the swizzle command, the line you need to change is this one: https://github.com/refinedev/refine/blob/next/packages/graphql/src/dataProvider/index.ts#L44

GitHub

refine/packages/graphql/src/dataProvider/index.ts at next · refined...

Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refinedev/refine

ratty-blush•11mo ago

If we don't Swizzle, should total: response[operation].count still work? That is, does this look valid to you: { "data": { "inventoryCompanies": [ { "id": 22, "name": "Logitech", "status": "ACTIVE", "archived": false, "numberOfItems": 2 } ], "count": 1 } }

Omer•11mo ago

I can't know without debugging 😦 You can swizzle and then debug it 🎁

ratty-blush•11mo ago

Ok great. Thanks for the quick responses! I'll let you know what I find.

Omer•11mo ago

Great, If you cannot solve the problem, please don't hesitate to write 🎯