fair-rose
fair-rose15mo ago

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
kapa.ai15mo 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
kapa.ai15mo ago
<@752749038742405211> kapa.ai is still learning and improving, please let us how it did by reacting below
Omer
Omer15mo ago
Hey @salihozdemir , shouldn't we take the length of the data instead of sending 0 as the number parameter?
correct-apricot
correct-apricot15mo ago
Hey @rev_eng_g, Which dataProvider are you using?
fair-rose
fair-rose15mo 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?
correct-apricot
correct-apricot15mo ago
Can you check the ‘total’ value in ‘getList’ method when you send pagination: “client” or “off”?
fair-rose
fair-rose15mo 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).
correct-apricot
correct-apricot15mo ago
It looks like a bug, please, can you create an issue for this?
fair-rose
fair-rose12mo 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
correct-apricot
correct-apricot12mo 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.
fair-rose
fair-rose9mo 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
Omer9mo 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.
fair-rose
fair-rose9mo 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
Omer9mo 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.
fair-rose
fair-rose9mo 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
Omer9mo 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).
fair-rose
fair-rose9mo 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
Omer9mo 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
fair-rose
fair-rose9mo 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
Omer9mo ago
I can't know without debugging 😦 You can swizzle and then debug it 🎁
fair-rose
fair-rose9mo ago
Ok great. Thanks for the quick responses! I'll let you know what I find.
Omer
Omer9mo ago
Great, If you cannot solve the problem, please don't hesitate to write 🎯