conscious-sapphire•6mo 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 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, I dont see how that could ever work with current code. data expected to be an array, and count will be always undefined. Any working example of pagination with @refinedev/graphql or other advise would be greatly appreciated. So far I ended up with workaround of patching getList with a wrapper method which takes 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

2 Replies

kapa.ai•6mo ago

Hi @karabur. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, it seems that the @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 being undefined is because the count is expected to be at the same level as the 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 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 function to fit your specific needs:

getList: async (resource, params) => {
    const response = await originalDataProvider.getList(resource, params);

    return {
        data: response.data,
        total: response.data.length,
    };
},

getList: async (resource, params) => {
    const response = await originalDataProvider.getList(resource, params);

    return {
        data: response.data,
        total: response.data.length,
    };
},

In this example, the total is being set to the length of the 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). 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 :speech_balloon: ----------------------

kapa.ai•6mo ago

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