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