how to i get serverside data total count?

how to i get serverside data total count? api response example : [{data... }]

2 Replies

Hi @동동햄. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To retrieve the total row count from a server-side data source in refine, you need to ensure that your API response includes a header or a field that provides the total count of items. Here are some examples and steps based on the provided knowledge sources: Example 1: Using REST API with Headers If your API includes the total count in the headers, you can extract it as follows:

const total = parseInt(response.headers.get("x-total-count") || "0");

return { data, total };

const total = parseInt(response.headers.get("x-total-count") || "0");

return { data, total };

(Source: Implementing Multitenancy in Refine (https://refine.dev/docs/guides-concepts/multi-tenancy/#implementing-multitenancy-in-refine)) Example 2: Using GraphQL If you are using a GraphQL data provider, you need to ensure that your query returns the total count. Here is an example of how you might modify the getList function to include the total count:

getList: async ({ resource, pagination, sort, filters, metaData }) => {
    const current = pagination?.current || 1;
    const pageSize = pagination?.pageSize || 10;

    const sortBy = genereteSort(sort);
    const filterBy = generateFilter(filters);

    const camelResource = camelCase(resource);

    const operation = metaData?.operation ?? camelResource;

    const operationConnection = operation + "Connection";
const { query, variables } = gql.query([
        {
            operation: operationConnection,
            variables: {
                ...metaData?.variables,
                sort: sortBy,
                where: { value: filterBy, type: "JSON" },
                start: (current - 1) * pageSize,
                limit: pageSize,
            },
            fields: [{ aggregate: ["count", "totalCount"] }],
        },
        {
            operation,
            variables: {
                ...metaData?.variables,
                sort: sortBy,
                where: { value: filterBy, type: "JSON" },
                start: (current - 1) * pageSize,
                limit: pageSize,
            },
            fields: metaData?.fields,
        },
    ]);

    const response = await Promise.all([
        client.request(query, variables),
    ]);

    return {
        data: response[0][operation],
        count: response[0][operationConnection].aggregate.count,
        total: response[0][operationConnection].aggregate.totalCount,
    };
}

getList: async ({ resource, pagination, sort, filters, metaData }) => {
    const current = pagination?.current || 1;
    const pageSize = pagination?.pageSize || 10;

    const sortBy = genereteSort(sort);
    const filterBy = generateFilter(filters);

    const camelResource = camelCase(resource);

    const operation = metaData?.operation ?? camelResource;

    const operationConnection = operation + "Connection";
const { query, variables } = gql.query([
        {
            operation: operationConnection,
            variables: {
                ...metaData?.variables,
                sort: sortBy,
                where: { value: filterBy, type: "JSON" },
                start: (current - 1) * pageSize,
                limit: pageSize,
            },
            fields: [{ aggregate: ["count", "totalCount"] }],
        },
        {
            operation,
            variables: {
                ...metaData?.variables,
                sort: sortBy,
                where: { value: filterBy, type: "JSON" },
                start: (current - 1) * pageSize,
                limit: pageSize,
            },
            fields: metaData?.fields,
        },
    ]);

    const response = await Promise.all([
        client.request(query, variables),
    ]);

    return {
        data: response[0][operation],
        count: response[0][operationConnection].aggregate.count,
        total: response[0][operationConnection].aggregate.totalCount,
    };
}

(Source: Modify strapi-graphql dataProvider (https://github.com/refinedev/refine/issues/1140)) Example 3: Using Next.js with SSR If you are using Next.js and want to fetch data server-side, you can use the dataProvider to fetch the total count:

import dataProvider from "@refinedev/simple-rest";

const API_URL = "<https://api.fake-rest.refine.dev";>

export default async function ProductList() {
    const { posts, total } = await getData();

    return (
        <div>
            <h1>Posts ({total})</h1>
            <hr />
            {posts.map((post) => (
                <div key={post.id}>
                    <h1>{post.title}</h1>
                    <p>{post.body}</p>
                </div>
            ))}
        </div>
    );
}
async function getData() {
    const response = await dataProvider(API_URL).getList({
        resource: "posts",
        pagination: { current: 1, pageSize: 10 },
    });

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

import dataProvider from "@refinedev/simple-rest";

const API_URL = "<https://api.fake-rest.refine.dev";>

export default async function ProductList() {
    const { posts, total } = await getData();

    return (
        <div>
            <h1>Posts ({total})</h1>
            <hr />
            {posts.map((post) => (
                <div key={post.id}>
                    <h1>{post.title}</h1>
                    <p>{post.body}</p>
                </div>
            ))}
        </div>
    );
}
async function getData() {
    const response = await dataProvider(API_URL).getList({
        resource: "posts",
        pagination: { current: 1, pageSize: 10 },
    });

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

(Source: [How to make SSR work? ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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

how to i get serverside data total count?

Did you find this page helpful?