ambitious-aqua•4mo ago

Cache busting list data on successful create or edit

@kapa.ai How can I implement cache busting list data on successful create or edit while using antd useTable and useDrawerForm?

8 Replies

kapa.ai•4mo ago

Hi @amvdxc. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement cache busting for list data on successful create or edit actions while using antd's useTable and useDrawerForm, you can leverage the invalidates prop. This prop allows you to specify which queries should be invalidated after a successful mutation. By default, useDrawerForm will invalidate the list, many, and detail queries for the resource on successful create or edit actions. However, you can customize this behavior using the invalidates prop. Here is an example of how you can set this up: For Create Action

import { HttpError } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    invalidates: ["list", "many"], // Specify the queries to invalidate
  });  
  
  return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"  
                  },  
                  {
label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

import { HttpError } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    invalidates: ["list", "many"], // Specify the queries to invalidate
  });  
  
  return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"  
                  },  
                  {
label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

For Edit Action ```tsx import { HttpError } from "@refinedev/core";
import React from "react";
import { Edit, EditButton, List, useDrawerForm, useTable } from "@refinedev/antd";
import { Drawer, Form, Input, Select, Space, Table } from "antd";

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

const PostList: React.FC = () => {
const { tableProps } = useTable<IP ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

ambitious-aquaOP•4mo ago

@kapa.ai I already tried invalidate. what other solutions are there?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- If you've already tried using the invalidates prop and are looking for other solutions to handle cache busting for list data on successful create or edit actions, you can consider using the invalidateOnClose or invalidateOnUnmount properties provided by useModalForm or useDrawerForm. Using invalidateOnClose The invalidateOnClose property is useful when you want to invalidate the list, many, and detail queries from the current resource when the modal or drawer is closed. By default, it invalidates these queries, but you can customize it. Here's an example using useDrawerForm:

import { HttpError } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    autoSave: {  
      enabled: true,  
      invalidateOnClose: true, // Invalidate queries when the drawer is closed
    },  
  });  
  
  return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"
},  
                  {  
                    label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

import { HttpError } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  
  
interface IPost {  
  id: number;  
  title: string;  
  status: "published" | "draft" | "rejected";  
}  
  
const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  
  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    autoSave: {  
      enabled: true,  
      invalidateOnClose: true, // Invalidate queries when the drawer is closed
    },  
  });  
  
  return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"
},  
                  {  
                    label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

Using invalidateOnUnmount The invalidateOnUnmount property is useful when you want to invalidate the list, many, and detail queries from the current resource when the hook is unmounted. By default, it invalidates these queries, but you can customize it. Here's an example using useModalForm: ```tsx import { HttpError } from "@refinedev/core";
import React from "react";
import { Create, List, useModalForm, useTable ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

ambitious-aquaOP•4mo ago

@kapa.ai invalidateOnUnmount and invalidateOnClose only work when AutoSave is enabled. Is there a way to make use of them when autosave is not enabled?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The invalidateOnUnmount and invalidateOnClose properties are indeed tied to the autoSave feature. If you want to invalidate queries without enabling autoSave, you can manually trigger the invalidation using the useInvalidate hook provided by refine. Here's how you can achieve this: 1. Import the useInvalidate hook from refine. 2. Call the invalidate function manually in the appropriate lifecycle methods or event handlers. Example using useDrawerForm without autoSave

import { HttpError, useInvalidate } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  

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

const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  const invalidate = useInvalidate();  

  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    onMutationSuccess: () => {  
      // Manually invalidate queries on successful mutation
      invalidate({ resource: "posts", action: "list" });
    },  
  });
return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"  
                  },  
                  {  
                    label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

import { HttpError, useInvalidate } from "@refinedev/core";  
import React from "react";  
import { Create, List, useDrawerForm, useTable } from "@refinedev/antd";  
import { Drawer, Form, Input, Select, Table } from "antd";  

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

const PostList: React.FC = () => {  
  const { tableProps } = useTable<IPost, HttpError>();  
  const invalidate = useInvalidate();  

  const { formProps, drawerProps, show, saveButtonProps } = useDrawerForm<  
    IPost,  
    HttpError,  
    IPost  
  >({  
    action: "create",  
    onMutationSuccess: () => {  
      // Manually invalidate queries on successful mutation
      invalidate({ resource: "posts", action: "list" });
    },  
  });
return (  
    <>  
      <List  
        canCreate  
        createButtonProps={{  
          onClick: () => {  
            show();  
          },  
        }}  
      >  
        <Table {...tableProps} rowKey="id">  
          <Table.Column dataIndex="id" title="ID" />  
          <Table.Column dataIndex="title" title="Title" />  
        </Table>  
      </List>  
      <Drawer {...drawerProps}>  
        <Create saveButtonProps={saveButtonProps}>  
          <Form {...formProps} layout="vertical">  
            <Form.Item  
              label="Title"  
              name="title"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Input />  
            </Form.Item>  
            <Form.Item  
              label="Status"  
              name="status"  
              rules={[  
                {  
                  required: true,  
                },  
              ]}  
            >  
              <Select  
                options={[  
                  {  
                    label: "Published",  
                    value: "published"  
                  },  
                  {  
                    label: "Draft",  
                    value: "draft"  
                  },  
                  {  
                    label: "Rejected",  
                    value: "rejected"  
                  }  
                ]}  
              />  
            </Form.Item>  
          </Form>  
        </Create>  
      </Drawer>  
    </>  
  );  
};

In this example, the invalidate function is called manually in the onMutationSuccess callback to invalidate the list queries for the posts resource. This approach allows you to control when the cache is invalidated without relying on the autoSave feature. For more details, you can refer to the Refine documentation (https://refine.dev/docs/core/hooks/useInvalidate/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Cache busting list data on successful create or edit

Did you find this page helpful?