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?
genetic-orange•2y ago
Hey @rev_eng_g, Which dataProvider are you using?
like-gold•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”?
like-gold•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?
like-gold•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.like-gold•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.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.
like-gold•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.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.
like-gold•13mo 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).