Bug or misconfiguration

const { deleteButtonProps } = useDrawerForm({
  // your other configurations
});

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    // close the drawer here
  },
};

const { deleteButtonProps } = useDrawerForm({
  // your other configurations
});

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    // close the drawer here
  },
};

useDrawerForm({  
 autoSave: {  
 enabled: true,  
 invalidateOnClose: false,  
 },  
});  

useDrawerForm({  
 autoSave: {  
 enabled: true,  
 invalidateOnClose: false,  
 },  
});  

 const {
    formProps: eformProps,
    drawerProps: edrawerProps,
    show: eshow,
    saveButtonProps: esaveButtonProps,
    id,
    deleteButtonProps,
    close: eclose,
  } = useDrawerForm<IPost, HttpError, IPost>({
    action: "edit",
  });

 const {
    formProps: eformProps,
    drawerProps: edrawerProps,
    show: eshow,
    saveButtonProps: esaveButtonProps,
    id,
    deleteButtonProps,
    close: eclose,
  } = useDrawerForm<IPost, HttpError, IPost>({
    action: "edit",
  });

const [visible, setVisible] = useState(false);

const { deleteButtonProps } = useDrawerForm({
  // your other configurations
});

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    setVisible(false); // close the drawer here
  },
};

// Pass `visible` and `setVisible` to your drawer component
<Drawer visible={visible} onClose={() => setVisible(false)}>
  {/* Your form goes here */}
</Drawer>

const [visible, setVisible] = useState(false);

const { deleteButtonProps } = useDrawerForm({
  // your other configurations
});

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    setVisible(false); // close the drawer here
  },
};

// Pass `visible` and `setVisible` to your drawer component
<Drawer visible={visible} onClose={() => setVisible(false)}>
  {/* Your form goes here */}
</Drawer>

<Edit
          saveButtonProps={esaveButtonProps}
          goBack={false}
          recordItemId={id}
          deleteButtonProps={{
            ...deleteButtonProps,
            onSuccess: () => eclose(),
          }}
        >

<Edit
          saveButtonProps={esaveButtonProps}
          goBack={false}
          recordItemId={id}
          deleteButtonProps={{
            ...deleteButtonProps,
            onSuccess: () => eclose(),
          }}
        >

const [isDeleted, setIsDeleted] = useState(false);

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    setIsDeleted(true);
    eclose();
  },
};

{!isDeleted && (
  <Edit
    saveButtonProps={esaveButtonProps}
    goBack={false}
    recordItemId={id}
    deleteButtonProps={customDeleteButtonProps}
  >
    {/* Your form goes here */}
  </Edit>
)}

const [isDeleted, setIsDeleted] = useState(false);

const customDeleteButtonProps = {
  ...deleteButtonProps,
  onSuccess: () => {
    setIsDeleted(true);
    eclose();
  },
};

{!isDeleted && (
  <Edit
    saveButtonProps={esaveButtonProps}
    goBack={false}
    recordItemId={id}
    deleteButtonProps={customDeleteButtonProps}
  >
    {/* Your form goes here */}
  </Edit>
)}

 {
        id: "category",
        header: "Category",
        accessorKey: "category.id",
        cell: function render({ getValue, table }) {
          const meta = table.options.meta as {
            categoryData: GetManyResponse<ICategory>;
          };
          const category = meta.categoryData?.data?.find(
            (item: ICategory) => item.id === getValue()
          );

          return category?.title ?? "";
          // console.log(table);
        },
      },

 {
        id: "category",
        header: "Category",
        accessorKey: "category.id",
        cell: function render({ getValue, table }) {
          const meta = table.options.meta as {
            categoryData: GetManyResponse<ICategory>;
          };
          const category = meta.categoryData?.data?.find(
            (item: ICategory) => item.id === getValue()
          );

          return category?.title ?? "";
          // console.log(table);
        },
      },

{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({ getValue, table }) {
    if (table.options.meta && 'categoryData' in table.options.meta) {
      const meta = table.options.meta as {
        categoryData: GetManyResponse<ICategory>;
      };
      const category = meta.categoryData?.data?.find(
        (item: ICategory) => item.id === getValue()
      );

      return category?.title ?? "";
    }
    return ""; // return a default value if meta or categoryData is not available
  },
},

{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({ getValue, table }) {
    if (table.options.meta && 'categoryData' in table.options.meta) {
      const meta = table.options.meta as {
        categoryData: GetManyResponse<ICategory>;
      };
      const category = meta.categoryData?.data?.find(
        (item: ICategory) => item.id === getValue()
      );

      return category?.title ?? "";
    }
    return ""; // return a default value if meta or categoryData is not available
  },
},

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  

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

interface ISearch {  
 title: string;  
}  

const PostList: React.FC = () => {  
 const { tableProps, searchFormProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
 });  

 return (  
 <List>  
 <Form {...searchFormProps} layout="inline">  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
 </Form>  
 <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"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};  

import { HttpError } from "@refinedev/core";  
import { List, TagField, useTable, SaveButton } from "@refinedev/antd";  
import { Table, Form, Input } from "antd";  

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

interface ISearch {  
 title: string;  
}  

const PostList: React.FC = () => {  
 const { tableProps, searchFormProps } = useTable<IPost, HttpError, ISearch>({  
 onSearch: (values) => {  
 return [  
 {  
 field: "title",  
 operator: "contains",  
 value: values.title,  
 },  
 ];  
 },  
 });  

 return (  
 <List>  
 <Form {...searchFormProps} layout="inline">  
 <Form.Item name="title">  
 <Input placeholder="Search by title" />  
 </Form.Item>  
 <SaveButton onClick={searchFormProps.form?.submit} />  
 </Form>  
 <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"  
 render={(value: string) => <TagField value={value} />}  
 />  
 </Table>  
 </List>  
 );  
};  

import React from "react";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  
import { GetManyResponse, HttpError, useMany } from "@refinedev/core";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 category: {  
 id: number;  
 };  
}  
  
const PostList: React.FC = () => {  
 const columns = React.useMemo<ColumnDef<IPost>[]>(  
 () => [  
 {  
 id: "id",  
 header: "ID",  
 accessorKey: "id",  
 },  
 {  
 id: "title",  
 header: "Title",  
 accessorKey: "title",  
 },  
 {  
 id: "status",  
 header: "Status",  
 accessorKey: "status",  
 },  
 {  
 id: "createdAt",  
 header: "CreatedAt",  
 accessorKey: "createdAt",  
 },  
 {  
 id: "category",  
 header: "Category",  
 accessorKey: "category.id",  
 cell: function render({ getValue, table }) {  
 const meta = table.options.meta as {  
 categoryData: GetManyResponse<ICategory>;  
 };  
 const category = meta.categoryData?.data?.find(  
 (item) => item.id === getValue(),  
 );  
  
 return category?.title ?? "Loading...";  
 },  
 },  
 ],  
 [],  
 );  
  
 const {  
 getHeaderGroups,  
 getRowModel,  
 setOptions,  
 refineCore: {  
 tableQueryResult: { data: tableData },  
 },  
 } = useTable<IPost, HttpError>({  
 columns,  
 });  
  
 // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
 const { data: categoryData } = useMany<ICategory, HttpError>({  
 resource: "categories",
 // ... rest of your code

import React from "react";  
import { useTable } from "@refinedev/react-table";  
import { ColumnDef, flexRender } from "@tanstack/react-table";  
import { GetManyResponse, HttpError, useMany } from "@refinedev/core";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
interface IPost {  
 id: number;  
 title: string;  
 content: string;  
 status: "published" | "draft" | "rejected";  
 category: {  
 id: number;  
 };  
}  
  
const PostList: React.FC = () => {  
 const columns = React.useMemo<ColumnDef<IPost>[]>(  
 () => [  
 {  
 id: "id",  
 header: "ID",  
 accessorKey: "id",  
 },  
 {  
 id: "title",  
 header: "Title",  
 accessorKey: "title",  
 },  
 {  
 id: "status",  
 header: "Status",  
 accessorKey: "status",  
 },  
 {  
 id: "createdAt",  
 header: "CreatedAt",  
 accessorKey: "createdAt",  
 },  
 {  
 id: "category",  
 header: "Category",  
 accessorKey: "category.id",  
 cell: function render({ getValue, table }) {  
 const meta = table.options.meta as {  
 categoryData: GetManyResponse<ICategory>;  
 };  
 const category = meta.categoryData?.data?.find(  
 (item) => item.id === getValue(),  
 );  
  
 return category?.title ?? "Loading...";  
 },  
 },  
 ],  
 [],  
 );  
  
 const {  
 getHeaderGroups,  
 getRowModel,  
 setOptions,  
 refineCore: {  
 tableQueryResult: { data: tableData },  
 },  
 } = useTable<IPost, HttpError>({  
 columns,  
 });  
  
 // Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
 const { data: categoryData } = useMany<ICategory, HttpError>({  
 resource: "categories",
 // ... rest of your code

{{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({{ getValue, table }}) {{
    if (table.options.meta && 'categoryData' in table.options.meta) {{
      const meta = table.options.meta as {{
        categoryData: GetManyResponse<ICategory>;
      }};
      const category = meta.categoryData?.data?.find(
        (item: ICategory) => item.id === getValue()
      );

      return category?.title ?? "";
    }}
    return ""; // return a default value if meta or categoryData is not available
  }},
}},

{{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({{ getValue, table }}) {{
    if (table.options.meta && 'categoryData' in table.options.meta) {{
      const meta = table.options.meta as {{
        categoryData: GetManyResponse<ICategory>;
      }};
      const category = meta.categoryData?.data?.find(
        (item: ICategory) => item.id === getValue()
      );

      return category?.title ?? "";
    }}
    return ""; // return a default value if meta or categoryData is not available
  }},
}},

const { data: categoryData } = useMany<ICategory, HttpError>({
  resource: "categories",
  // ... rest of your code
});

const {
  getHeaderGroups,
  getRowModel,
  setOptions,
  refineCore: {
    tableQueryResult: { data: tableData },
  },
} = useTable<IPost, HttpError>({
  columns,
  meta: {
    categoryData: categoryData,
  },
});

const { data: categoryData } = useMany<ICategory, HttpError>({
  resource: "categories",
  // ... rest of your code
});

const {
  getHeaderGroups,
  getRowModel,
  setOptions,
  refineCore: {
    tableQueryResult: { data: tableData },
  },
} = useTable<IPost, HttpError>({
  columns,
  meta: {
    categoryData: categoryData,
  },
});

const {  
  getHeaderGroups,  
  getRowModel,  
  setOptions,  
  refineCore: {  
    tableQueryResult: { data: tableData },  
  },  
} = useTable<IPost, HttpError>({  
  columns,  
});  

// Creates the array of ids. This will filter and fetch the category data for the relevant posts.  
const categoryIds = tableData?.data?.map((p) => p.category.id) || [];  

// Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
const { data: categoryData } = useMany<ICategory, HttpError>({  
  resource: "categories",  
  ids: categoryIds,  
  queryOptions: {  
    // Set to true only if the posts array is not empty.  
    enabled: categoryIds.length > 0,  
  },  
});  

const {  
  getHeaderGroups,  
  getRowModel,  
  setOptions,  
  refineCore: {  
    tableQueryResult: { data: tableData },  
  },  
} = useTable<IPost, HttpError>({  
  columns,  
});  

// Creates the array of ids. This will filter and fetch the category data for the relevant posts.  
const categoryIds = tableData?.data?.map((p) => p.category.id) || [];  

// Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
const { data: categoryData } = useMany<ICategory, HttpError>({  
  resource: "categories",  
  ids: categoryIds,  
  queryOptions: {  
    // Set to true only if the posts array is not empty.  
    enabled: categoryIds.length > 0,  
  },  
});  

const {  
  getHeaderGroups,  
  getRowModel,  
  setOptions,  
  refineCore: {  
    tableQueryResult: { data: tableData },  
  },  
} = useTable<IPost, HttpError>({  
  columns,  
});  

// Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
const { data: categoryData } = useMany<ICategory, HttpError>({  
  resource: "categories",  
  ids: categoryIds,  
  queryOptions: {  
    // Set to true only if the posts array is not empty.  
    enabled: categoryIds.length > 0,  
  },  
});  

// Pass the fetched categories to the table options
setOptions((prev) => ({
  ...prev,
  meta: {
    ...prev.meta,
    categoryData: categoryData,
  },
}));

// In your columns definition
{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({ getValue, table }) {
    const meta = table.options.meta as {
      categoryData: GetManyResponse<ICategory>;
    };
    const category = meta.categoryData?.data?.find(
      (item) => item.id === getValue(),
    );

    return category?.title ?? "Loading...";
  },
},

const {  
  getHeaderGroups,  
  getRowModel,  
  setOptions,  
  refineCore: {  
    tableQueryResult: { data: tableData },  
  },  
} = useTable<IPost, HttpError>({  
  columns,  
});  

// Fetches the category of each post. It uses the useMany hook to fetch the category data from the API.  
const { data: categoryData } = useMany<ICategory, HttpError>({  
  resource: "categories",  
  ids: categoryIds,  
  queryOptions: {  
    // Set to true only if the posts array is not empty.  
    enabled: categoryIds.length > 0,  
  },  
});  

// Pass the fetched categories to the table options
setOptions((prev) => ({
  ...prev,
  meta: {
    ...prev.meta,
    categoryData: categoryData,
  },
}));

// In your columns definition
{
  id: "category",
  header: "Category",
  accessorKey: "category.id",
  cell: function render({ getValue, table }) {
    const meta = table.options.meta as {
      categoryData: GetManyResponse<ICategory>;
    };
    const category = meta.categoryData?.data?.find(
      (item) => item.id === getValue(),
    );

    return category?.title ?? "Loading...";
  },
},

import { useGo } from "@refinedev/core";

const go = useGo();

// Navigate to the list page of the 'posts' resource
go("posts.list");

// Navigate to the create page of the 'posts' resource
go("posts.create");

// Navigate to the edit page of the 'posts' resource with id '1'
go("posts.edit", { id: "1" });

// Navigate to the show page of the 'posts' resource with id '1'
go("posts.show", { id: "1" });

import { useGo } from "@refinedev/core";

const go = useGo();

// Navigate to the list page of the 'posts' resource
go("posts.list");

// Navigate to the create page of the 'posts' resource
go("posts.create");

// Navigate to the edit page of the 'posts' resource with id '1'
go("posts.edit", { id: "1" });

// Navigate to the show page of the 'posts' resource with id '1'
go("posts.show", { id: "1" });

import { useMenu } from "@refinedev/core";  
import { NavLink } from "react-router-dom";  
  
export const Menu = () => {  
 const { menuItems } = useMenu();  
  
 return (  
 <nav className="sticky top-0 z-50 menu mx-0 bg-white">  
 <ul className="mx-0 flex justify-start items-center">  
 {menuItems.map((item) => (  
 <li key={item?.key} className="mx-0 flex justify-start items-center">  
 <div className="text-gray-600">  
 <NavLink  
 className="text-lg flex items-center"  
 to={item?.route ?? "/"}  
 >  
 <span className="mr-2">{item?.icon}</span>  
 {item?.label}  
 </NavLink>  
 </div>  
 </li>  
 ))}  
 </ul>  
 </nav>  
 );  
};  

import { useMenu } from "@refinedev/core";  
import { NavLink } from "react-router-dom";  
  
export const Menu = () => {  
 const { menuItems } = useMenu();  
  
 return (  
 <nav className="sticky top-0 z-50 menu mx-0 bg-white">  
 <ul className="mx-0 flex justify-start items-center">  
 {menuItems.map((item) => (  
 <li key={item?.key} className="mx-0 flex justify-start items-center">  
 <div className="text-gray-600">  
 <NavLink  
 className="text-lg flex items-center"  
 to={item?.route ?? "/"}  
 >  
 <span className="mr-2">{item?.icon}</span>  
 {item?.label}  
 </NavLink>  
 </div>  
 </li>  
 ))}  
 </ul>  
 </nav>  
 );  
};  

const App = () => {  
 return (  
 <BrowserRouter>  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 //...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 show: "/posts/show/:id",  
 meta: { icon: PostIcon },  
 },  
 ]}  
 >  
 //...  
 </Refine>  
 </ConfigProvider>  
 </BrowserRouter>  
 );  
};  

const App = () => {  
 return (  
 <BrowserRouter>  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <Refine  
 //...  
 resources={[  
 {  
 name: "posts",  
 list: "/posts",  
 show: "/posts/show/:id",  
 meta: { icon: PostIcon },  
 },  
 ]}  
 >  
 //...  
 </Refine>  
 </ConfigProvider>  
 </BrowserRouter>  
 );  
};  

import { HomeOutlined } from "@ant-design/icons";

const App = () => {
  return (
    <Refine
      resources={[
        {
          name: "posts",
          list: "/posts",
          show: "/posts/show/:id",
          meta: { icon: <HomeOutlined style={{ fontSize: '18px' }} /> },
        },
      ]}
    >
      {/* ... */}
    </Refine>
  );
};

import { HomeOutlined } from "@ant-design/icons";

const App = () => {
  return (
    <Refine
      resources={[
        {
          name: "posts",
          list: "/posts",
          show: "/posts/show/:id",
          meta: { icon: <HomeOutlined style={{ fontSize: '18px' }} /> },
        },
      ]}
    >
      {/* ... */}
    </Refine>
  );
};

import { Refine } from "@refinedev/core";  
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  

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

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 list: "/CMS/posts",  
 meta: { parent: "CMS" },  
 },  
 {  
 name: "categories",  
 list: "/CMS/categories",  
 meta: { parent: "CMS" },  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Layout>  
 <Outlet />  
 </Layout>  
 }  
 >  
 <Route index element={<NavigateToResource />} />  
 <Route path="/posts" element={<div>dummy posts page</div>} />  
 <Route  
 path="/categories"  
 element={<div>dummy categories page</div>}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};  

export default App;

import { Refine } from "@refinedev/core";  
import routerProvider, { NavigateToResource } from "@refinedev/react-router-v6";  
import dataProvider from "@refinedev/simple-rest";  
import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom";  

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

const App: React.FC = () => {  
 return (  
 <BrowserRouter>  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(API_URL)}  
 resources={[  
 {  
 name: "CMS",  
 },  
 {  
 name: "posts",  
 list: "/CMS/posts",  
 meta: { parent: "CMS" },  
 },  
 {  
 name: "categories",  
 list: "/CMS/categories",  
 meta: { parent: "CMS" },  
 },  
 ]}  
 >  
 <Routes>  
 <Route  
 element={  
 <Layout>  
 <Outlet />  
 </Layout>  
 }  
 >  
 <Route index element={<NavigateToResource />} />  
 <Route path="/posts" element={<div>dummy posts page</div>} />  
 <Route  
 path="/categories"  
 element={<div>dummy categories page</div>}  
 />  
 </Route>  
 </Routes>  
 </Refine>  
 </BrowserRouter>  
 );  
};  

export default App;