Refine•2y ago

Pagination with @refinedev/graphql provider

Hi Everyone.
I am building some CRUD pages in our product and found Refine to be a great fit for our case.
With that, I am having an issue - I am using

@refinedev/graphql

@refinedev/graphql

provider, and can't figure out how to make pagination work.

My list query returns an array of entities, and I don't see a way to add count variable.
it is used here in provider

          return {
                data: response[operation],
                total: response[operation].count,
            };

          return {
                data: response[operation],
                total: response[operation].count,
            };

Which looks quite weird, I would expect it to have something like

data: response[operation].data

data: response[operation].data

, I dont see how that could ever work with current code.

data

data

expected to be an array, and

count

count

will be always undefined.
Any working example of pagination with

@refinedev/graphql

@refinedev/graphql

or other advise would be greatly appreciated.

So far I ended up with workaround of patching

getList

getList

with a wrapper method which takes

data

data

which is actually a paginated data, with two fields - list of values and total count, and "extracts" from there, returning proper values. Not an ideal solution

kapa.ai•2/16/24, 3:42 AM

Hi @karabur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•2/16/24, 3:42 AM

----------------------
Based on the information provided in the extracts, it seems that the

@refinedev/graphql

@refinedev/graphql

provider was built as an example based on Strapi's GraphQL schema and it's not based on a real backend. Therefore, it might not work perfectly with your specific backend and data structure.

The issue you're facing with the

count

count

being

undefined

undefined

is because the

count

count

is expected to be at the same level as the

data

data

in the response. This is how it's structured in the example GraphQL schema that the provider was built on. However, this might not be the case with your specific GraphQL server.

One way to solve this issue is to modify the GraphQL data provider to fit your specific needs. You can do this by including the GraphQL data provider into your own project with the swizzle command. After the swizzle command, you can change the line where the

count

count

is being accessed to fit your specific data structure. Here is the line you need to change: https://github.com/refinedev/refine/blob/next/packages/graphql/src/dataProvider/index.ts#L44

Here is an example of how you can modify the

getList

getList

function to fit your specific needs:

In this example, the is being set to the length of the

data

data

array. You can modify this to fit your specific data structure.

Remember that this is just an example and you might need to modify it to fit your specific needs. You can find more information about the swizzle command in the Refine documentation (https://refine.dev/docs/packages/documentation/cli/#commands).

kapa.ai•2/16/24, 3:42 AM

If you're still having issues, you can debug your code after the swizzle command to see what might be causing the issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•2/16/24, 3:42 AM

@270112333735395328 kapa.ai is still learning and improving, please let us know how it did by reacting below