fair-rose•6mo ago

How to sent custom req body while fetching data

i want to sent some data to filter data fetching on the backend. How to sent custom data while fetching data to table in antd table ?

17 Replies

kapa.ai•6mo ago

Hi @M Farhan Zachary. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To send custom data while fetching data to filter data on the backend in an Ant Design table using refine, you can use the useCustom hook. This hook allows you to send custom request bodies to your data provider. Here is an example of how you can achieve this: 1. Define the custom request with useCustom: You can use the useCustom hook to send a custom request body. The config.filters property can be used to send filter query parameters.

   import { useCustom } from "@refinedev/core";
   import { Table } from "antd";
   import React, { useState } from "react";

   const CustomTable: React.FC = () => {
       const [filters, setFilters] = useState([
           {
               field: "title",
               operator: "contains",
               value: "Foo",
           },
       ]);

       const { data, isLoading } = useCustom({
           url: "API_URL",
           method: "get",
           config: {
               filters,
           },
       });

       return (
           <Table dataSource={data?.data} loading={isLoading} rowKey="id">
               <Table.Column dataIndex="id" title="ID" />
               <Table.Column dataIndex="title" title="Title" />
               <Table.Column dataIndex="content" title="Content" />
           </Table>
       );
   };

   export default CustomTable;

   import { useCustom } from "@refinedev/core";
   import { Table } from "antd";
   import React, { useState } from "react";

   const CustomTable: React.FC = () => {
       const [filters, setFilters] = useState([
           {
               field: "title",
               operator: "contains",
               value: "Foo",
           },
       ]);

       const { data, isLoading } = useCustom({
           url: "API_URL",
           method: "get",
           config: {
               filters,
           },
       });

       return (
           <Table dataSource={data?.data} loading={isLoading} rowKey="id">
               <Table.Column dataIndex="id" title="ID" />
               <Table.Column dataIndex="title" title="Title" />
               <Table.Column dataIndex="content" title="Content" />
           </Table>
       );
   };

   export default CustomTable;

2. Update filters dynamically: You can update the filters dynamically based on user input or other criteria. For example, you can use a form or input fields to update the filters state and then refetch the data.

   import { useCustom } from "@refinedev/core";
   import { Table, Input, Button } from "antd";
   import React, { useState } from "react";
const CustomTable: React.FC = () => {
       const [filters, setFilters] = useState([
           {
               field: "title",
               operator: "contains",
               value: "Foo",
           },
       ]);

       const { data, isLoading, refetch } = useCustom({
           url: "API_URL",
           method: "get",
           config: {
               filters,
           },
       });

       const handleFilterChange = (value: string) => {
           setFilters([
               {
                   field: "title",
                   operator: "contains",
                   value,
               },
           ]);
           refetch();
       };

       return (
           <div>
               <Input
                   placeholder="Filter by title"
                   onChange={(e) => handleFilterChange(e.target.value)}
               />
               <Table dataSource={data?.data} loading={isLoading} rowKey="id">
                   <Table.Column dataIndex="id" title="ID" />
                   <Table.Column dataIndex="title" title="Title" />
                   <Table.Column dataIndex="content" title="Content" />
               </Table>
           </div>
       );
   };

   export default CustomTable;

   import { useCustom } from "@refinedev/core";
   import { Table, Input, Button } from "antd";
   import React, { useState } from "react";
const CustomTable: React.FC = () => {
       const [filters, setFilters] = useState([
           {
               field: "title",
               operator: "contains",
               value: "Foo",
           },
       ]);

       const { data, isLoading, refetch } = useCustom({
           url: "API_URL",
           method: "get",
           config: {
               filters,
           },
       });

       const handleFilterChange = (value: string) => {
           setFilters([
               {
                   field: "title",
                   operator: "contains",
                   value,
               },
           ]);
           refetch();
       };

       return (
           <div>
               <Input
                   placeholder="Filter by title"
                   onChange={(e) => handleFilterChange(e.target.value)}
               />
               <Table dataSource={data?.data} loading={isLoading} rowKey="id">
                   <Table.Column dataIndex="id" title="ID" />
                   <Table.Column dataIndex="title" title="Title" />
                   <Table.Column dataIndex="content" title="Content" />
               </Table>
           </div>
       );
   };

   export default CustomTable;

In this example, the useCustom hook is used to send a custom request with filters to the backend. The filters state is updated based on user input, and the refetch function is called to fetch the filtered data. For more details, you can refer to the useCustom documentation (https://refine.dev/docs/data/hooks/use-custom/#configfilters). If you need to handle more complex filtering scenarios, you can also look into the useTable hook and its filtering capabilities as described in the [useTable documentation](https://refine.dev/docs/ui-integrations/ant-design/hooks/use ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

fair-roseOP•6mo ago

can i just simply using useTable and sent some data to req.body from there? @kapa.ai

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use the useTable hook to send custom data to the request body. You can achieve this by using the meta property within the useTable hook configuration. The meta property allows you to send additional data with your request. Here is an example of how you can use the useTable hook to send custom data to the request body:

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>({
    meta: {
      customData: {
        filter: "customFilterValue",
      },
    },
  });

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="title" title="Title" />
      <Table.Column dataIndex="content" title="Content" />
      <Table.Column dataIndex="status" title="Status" />
    </Table>
  );
};

export default PostList;

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

interface IPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
}

const PostList: React.FC = () => {
  const { tableProps } = useTable<IPost>({
    meta: {
      customData: {
        filter: "customFilterValue",
      },
    },
  });

  return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="title" title="Title" />
      <Table.Column dataIndex="content" title="Content" />
      <Table.Column dataIndex="status" title="Status" />
    </Table>
  );
};

export default PostList;

In this example, the meta property is used to send custom data (customData) with the request. The useTable hook will include this data in the request body when fetching data from the backend. For more details, you can refer to the useTable documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#queryoptions). If you need to handle more complex scenarios, you can also look into the queryOptions property to customize the query behavior further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

fair-roseOP•6mo ago

it didn't sent the req.body ? @kapa.ai

   const { tableProps } = useTable({
      syncWithLocation: true,
      meta: {
         customData:{
            filter:"administrator"
         }
      }
   });

   const { tableProps } = useTable({
      syncWithLocation: true,
      meta: {
         customData:{
            filter:"administrator"
         }
      }
   });

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To send custom data in the request body using the useTable hook, you need to ensure that your data provider is configured to handle the meta property and include it in the request body. The meta property is typically used to send additional data with the request, but it depends on how your data provider processes this information. Here is an example of how you can achieve this by customizing the data provider to include the meta data in the request body: 1. Create a custom data provider: Customize your data provider to include the meta data in the request body.

   import { DataProvider } from "@refinedev/core";
   import axios from "axios";

   const axiosInstance = axios.create({
     baseURL: "<https://api.example.com",>
   });

   const customDataProvider: DataProvider = {
     getList: async ({ resource, pagination, filters, sort, meta }) => {
       const response = await axiosInstance.post(
         `/${resource}`,
         {
           pagination,
           filters,
           sort,
           ...meta?.customData, // Include custom data in the request body
         }
       );
       return {
         data: response.data,
         total: response.data.length,
       };
     },
     // Implement other methods (getOne, create, update, delete) as needed
   };

   export default customDataProvider;

   import { DataProvider } from "@refinedev/core";
   import axios from "axios";

   const axiosInstance = axios.create({
     baseURL: "<https://api.example.com",>
   });

   const customDataProvider: DataProvider = {
     getList: async ({ resource, pagination, filters, sort, meta }) => {
       const response = await axiosInstance.post(
         `/${resource}`,
         {
           pagination,
           filters,
           sort,
           ...meta?.customData, // Include custom data in the request body
         }
       );
       return {
         data: response.data,
         total: response.data.length,
       };
     },
     // Implement other methods (getOne, create, update, delete) as needed
   };

   export default customDataProvider;

2. Use the custom data provider in your application: Configure your refine application to use the custom data provider.

   import { Refine } from "@refinedev/core";
   import { AntdLayout, useTable } from "@refinedev/antd";
   import customDataProvider from "./customDataProvider";
   import { Table } from "antd";
   import React from "react";
const App: React.FC = () => {
     return (
       <Refine dataProvider={customDataProvider}>
         <AntdLayout>
           <PostList />
         </AntdLayout>
       </Refine>
     );
   };

   const PostList: React.FC = () => {
     const { tableProps } = useTable({
       syncWithLocation: true,
       meta: {
         customData: {
           filter: "administrator",
         },
       },
     });

     return (
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
         <Table.Column dataIndex="title" title="Title" />
         <Table.Column dataIndex="content" title="Content" />
         <Table.Column dataIndex="status" title="Status" />
       </Table>
     );
   };

   export default App;

   import { Refine } from "@refinedev/core";
   import { AntdLayout, useTable } from "@refinedev/antd";
   import customDataProvider from "./customDataProvider";
   import { Table } from "antd";
   import React from "react";
const App: React.FC = () => {
     return (
       <Refine dataProvider={customDataProvider}>
         <AntdLayout>
           <PostList />
         </AntdLayout>
       </Refine>
     );
   };

   const PostList: React.FC = () => {
     const { tableProps } = useTable({
       syncWithLocation: true,
       meta: {
         customData: {
           filter: "administrator",
         },
       },
     });

     return (
       <Table {...tableProps} rowKey="id">
         <Table.Column dataIndex="id" title="ID" />
         <Table.Column dataIndex="title" title="Title" />
         <Table.Column dataIndex="content" title="Content" />
         <Table.Column dataIndex="status" title="Status" />
       </Table>
     );
   };

   export default App;

In this example, the custom data provider includes the meta data in the request body when making the getList request. You can customize the data provider further to handle other methods (getOne, create, update, delete) as needed. For more details, you can refer to the useTable documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#queryoptions) and the data provider documentation (https://refine.dev/docs/core/providers/data-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

fair-roseOP•6mo ago

here is my data provider @kapa.ai

message.txt

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To send custom data in the request body using the useTable hook, you need to ensure that your data provider is configured to handle the meta property and include it in the request body. Below is an example of how you can achieve this by customizing the data provider to include the meta data in the request body. Step 1: Create a Custom Data Provider Customize your data provider to include the meta data in the request body.

import { DataProvider } from "@refinedev/core";
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "<https://api.example.com",>
});

const customDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort, meta }) => {
    const response = await axiosInstance.post(
      `/${resource}`,
      {
        pagination,
        filters,
        sort,
        ...meta?.customData, // Include custom data in the request body
      }
    );
    return {
      data: response.data,
      total: response.data.length,
    };
  },
  // Implement other methods (getOne, create, update, delete) as needed
};

export default customDataProvider;

import { DataProvider } from "@refinedev/core";
import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "<https://api.example.com",>
});

const customDataProvider: DataProvider = {
  getList: async ({ resource, pagination, filters, sort, meta }) => {
    const response = await axiosInstance.post(
      `/${resource}`,
      {
        pagination,
        filters,
        sort,
        ...meta?.customData, // Include custom data in the request body
      }
    );
    return {
      data: response.data,
      total: response.data.length,
    };
  },
  // Implement other methods (getOne, create, update, delete) as needed
};

export default customDataProvider;

Step 2: Use the Custom Data Provider in Your Application Configure your refine application to use the custom data provider.

import { Refine } from "@refinedev/core";
import { AntdLayout, useTable } from "@refinedev/antd";
import customDataProvider from "./customDataProvider";
import { Table } from "antd";
import React from "react";

const App: React.FC = () => {
  return (
    <Refine dataProvider={customDataProvider}>
      <AntdLayout>
        <PostList />
      </AntdLayout>
    </Refine>
  );
};

const PostList: React.FC = () => {
  const { tableProps } = useTable({
    syncWithLocation: true,
    meta: {
      customData: {
        filter: "administrator",
      },
    },
  });
return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="title" title="Title" />
      <Table.Column dataIndex="content" title="Content" />
      <Table.Column dataIndex="status" title="Status" />
    </Table>
  );
};

export default App;

import { Refine } from "@refinedev/core";
import { AntdLayout, useTable } from "@refinedev/antd";
import customDataProvider from "./customDataProvider";
import { Table } from "antd";
import React from "react";

const App: React.FC = () => {
  return (
    <Refine dataProvider={customDataProvider}>
      <AntdLayout>
        <PostList />
      </AntdLayout>
    </Refine>
  );
};

const PostList: React.FC = () => {
  const { tableProps } = useTable({
    syncWithLocation: true,
    meta: {
      customData: {
        filter: "administrator",
      },
    },
  });
return (
    <Table {...tableProps} rowKey="id">
      <Table.Column dataIndex="id" title="ID" />
      <Table.Column dataIndex="title" title="Title" />
      <Table.Column dataIndex="content" title="Content" />
      <Table.Column dataIndex="status" title="Status" />
    </Table>
  );
};

export default App;

kapa.ai•6mo ago

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

fair-roseOP•6mo ago

is this correct ? @kapa.ai

  getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
      _start?: number;
      _end?: number;
      _sort?: string;
      _order?: string;
    } = {};

    if (mode === "server") {
      query._start = (current - 1) * pageSize;
      query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
      const { _sort, _order } = generatedSort;
      query._sort = _sort.join(",");
      query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
      `${url}?${stringify(query)}&${stringify(queryFilters)}`,
      {
        headers: headersFromMeta,
      }
    );

    const total = +headers["x-total-count"];

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

  getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
      _start?: number;
      _end?: number;
      _sort?: string;
      _order?: string;
    } = {};

    if (mode === "server") {
      query._start = (current - 1) * pageSize;
      query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
      const { _sort, _order } = generatedSort;
      query._sort = _sort.join(",");
      query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
      `${url}?${stringify(query)}&${stringify(queryFilters)}`,
      {
        headers: headersFromMeta,
      }
    );

    const total = +headers["x-total-count"];

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

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Your getList method looks mostly correct, but to ensure that custom data from the meta property is included in the request body, you need to modify it slightly. Here is the updated version of your getList method:

const getList: DataProvider["getList"] = async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
        _start?: number;
        _end?: number;
        _sort?: string;
        _order?: string;
    } = {};

    if (mode === "server") {
        query._start = (current - 1) * pageSize;
        query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
        const { _sort, _order } = generatedSort;
        query._sort = _sort.join(",");
        query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
        `${url}?${stringify(query)}&${stringify(queryFilters)}`,
        {
            headers: headersFromMeta,
            data: customData, // Include custom data in the request body
        }
    );

    const total = +headers["x-total-count"];

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

const getList: DataProvider["getList"] = async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
        _start?: number;
        _end?: number;
        _sort?: string;
        _order?: string;
    } = {};

    if (mode === "server") {
        query._start = (current - 1) * pageSize;
        query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
        const { _sort, _order } = generatedSort;
        query._sort = _sort.join(",");
        query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
        `${url}?${stringify(query)}&${stringify(queryFilters)}`,
        {
            headers: headersFromMeta,
            data: customData, // Include custom data in the request body
        }
    );

    const total = +headers["x-total-count"];

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

Explanation: 1. Extract customData from meta:

   const { headers: headersFromMeta, method, customData } = meta ?? {};

   const { headers: headersFromMeta, method, customData } = meta ?? {};

2. Include customData in the request body:

   const { data, headers } = await httpClient[requestMethod](
       `${url}?${stringify(query)}&${stringify(queryFilters)}`,
       {
           headers: headersFromMeta,
           data: customData, // Include custom data in the request body
       }
   );

   const { data, headers } = await httpClient[requestMethod](
       `${url}?${stringify(query)}&${stringify(queryFilters)}`,
       {
           headers: headersFromMeta,
           data: customData, // Include custom data in the request body
       }
   );

Usage in useTable Hook: Now, you can use the useTable hook and pass the custom data through the meta property:

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
        meta: {
            customData: {
                filter: "administrator",
            },
        },
    });

    return (
        <Table {...tableProps} rowKey="id">
            <Table.Column dataIndex="id" title="ID" />
            <Table.Column dataIndex="title" title="Title" />
            <Table.Column dataIndex="content" title="Content" />
            <Table.Column dataIndex="status" title="Status" />
        </Table>
    );
};

export default PostList;

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
        meta: {
            customData: {
                filter: "administrator",
            },
        },
    });

    return (
        <Table {...tableProps} rowKey="id">
            <Table.Column dataIndex="id" title="ID" />
            <Table.Column dataIndex="title" title="Title" />
            <Table.Column dataIndex="content" title="Content" />
            <Table.Column dataIndex="status" title="Status" />
        </Table>
    );
};

export default PostList;

This setup ensures that the custom data is included in the request body when fetching data using the useTable hook. For more details, you can refer to the useTable documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#queryoptions) and the data provider documentation (https://refine.dev/docs/core/providers/data-provider/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

fair-roseOP•6mo ago

@kapa.ai here is my updated data provider but when i check req.body it shows nothing

 getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
      _start?: number;
      _end?: number;
      _sort?: string;
      _order?: string;
    } = {};

    if (mode === "server") {
      query._start = (current - 1) * pageSize;
      query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
      const { _sort, _order } = generatedSort;
      query._sort = _sort.join(",");
      query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
      `${url}?${stringify(query)}&${stringify(queryFilters)}`,
      {
        headers: headersFromMeta,
        data: customData,// Include custom data in the request body
      }
    );

    const total = +headers["x-total-count"];

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

 getList: async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
      _start?: number;
      _end?: number;
      _sort?: string;
      _order?: string;
    } = {};

    if (mode === "server") {
      query._start = (current - 1) * pageSize;
      query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
      const { _sort, _order } = generatedSort;
      query._sort = _sort.join(",");
      query._order = _order.join(",");
    }

    const { data, headers } = await httpClient[requestMethod](
      `${url}?${stringify(query)}&${stringify(queryFilters)}`,
      {
        headers: headersFromMeta,
        data: customData,// Include custom data in the request body
      }
    );

    const total = +headers["x-total-count"];

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

and my usetable

   const { tableProps } = useTable({
      syncWithLocation: true,
      meta: {
         customData:{
            filter:"administrator"
         }
      }
   });

   const { tableProps } = useTable({
      syncWithLocation: true,
      meta: {
         customData:{
            filter:"administrator"
         }
      }
   });

kapa.ai•6mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To ensure that custom data is sent in the request body while using the useTable hook, you need to make sure that the httpClient is configured to handle the request method properly. Specifically, for POST requests, the data should be included in the request body, while for GET requests, the data should be included in the query parameters. Here is the updated getList method in your data provider:

const getList: DataProvider["getList"] = async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
        _start?: number;
        _end?: number;
        _sort?: string;
        _order?: string;
    } = {};

    if (mode === "server") {
        query._start = (current - 1) * pageSize;
        query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
        const { _sort, _order } = generatedSort;
        query._sort = _sort.join(",");
        query._order = _order.join(",");
    }
let response;
    if (requestMethod === "get") {
        response = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`,
            {
                headers: headersFromMeta,
            }
        );
    } else {
        response = await httpClient.post(
            url,
            {
                ...customData, // Include custom data in the request body
                pagination: { current, pageSize },
                filters: queryFilters,
                sorters: generatedSort,
            },
            {
                headers: headersFromMeta,
            }
        );
    }

    const { data, headers } = response;
    const total = +headers["x-total-count"];

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

const getList: DataProvider["getList"] = async ({ resource, pagination, filters, sorters, meta }) => {
    const url = `${apiUrl}/${resource}`;

    const { current = 1, pageSize = 10, mode = "server" } = pagination ?? {};

    const { headers: headersFromMeta, method, customData } = meta ?? {};
    const requestMethod = (method as MethodTypes) ?? "get";

    const queryFilters = generateFilter(filters);

    const query: {
        _start?: number;
        _end?: number;
        _sort?: string;
        _order?: string;
    } = {};

    if (mode === "server") {
        query._start = (current - 1) * pageSize;
        query._end = current * pageSize;
    }

    const generatedSort = generateSort(sorters);
    if (generatedSort) {
        const { _sort, _order } = generatedSort;
        query._sort = _sort.join(",");
        query._order = _order.join(",");
    }
let response;
    if (requestMethod === "get") {
        response = await httpClient.get(
            `${url}?${stringify(query)}&${stringify(queryFilters)}`,
            {
                headers: headersFromMeta,
            }
        );
    } else {
        response = await httpClient.post(
            url,
            {
                ...customData, // Include custom data in the request body
                pagination: { current, pageSize },
                filters: queryFilters,
                sorters: generatedSort,
            },
            {
                headers: headersFromMeta,
            }
        );
    }

    const { data, headers } = response;
    const total = +headers["x-total-count"];

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

Usage in useTable Hook Now, you can use the useTable hook and pass the custom data through the meta property:

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
        meta: {
            customData: {
                filter: "administrator",
            },
        },
    });

    return (
        <Table {...tableProps} rowKey="id">
            <Table.Column dataIndex="id" title="ID" />
            <Table.Column dataIndex="title" title="Title" />
            <Table.Column dataIndex="content" title="Content" />
            <Table.Column dataIndex="status" title="Status" />
        </Table>
    );
};

export default PostList;

import { useTable } from "@refinedev/antd";
import { Table } from "antd";
import React from "react";

const PostList: React.FC = () => {
    const { tableProps } = useTable({
        syncWithLocation: true,
        meta: {
            customData: {
                filter: "administrator",
            },
        },
    });

    return (
        <Table {...tableProps} rowKey="id">
            <Table.Column dataIndex="id" title="ID" />
            <Table.Column dataIndex="title" title="Title" />
            <Table.Column dataIndex="content" title="Content" />
            <Table.Column dataIndex="status" title="Status" />
        </Table>
    );
};

export default PostList;

Explanation 1. Check Request Method: - For GET requests, include the custom data in the query parameters. - For POST requests, include the custom data in the request body. 2. Include Custom Data: - Ensure that customData is included in the request body for POST requests. This setup ensures that the custom data is included in the request body when fetching data using the useTable hook. For ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

How to sent custom req body while fetching data

Did you find this page helpful?