useCustomModalForm
how to not close the form and invalidate on success and only invalidate when the form is closed manually.
false to prevent the modal from closing automatically after a successful submit:close function returned by useModalForm along with the hook:close function returned by useModalForm and combine it with your custom logic:close function:useModalForm hook. Here's how you can implement this approach:useModalForm hook with an callback:close function. It also ensures that the invalidation happens regardless of how the modal is closed.useModalForm.close function returned by useModalForm along with the hook to listen for changes in the modal's visibility. Here's how you can implement this:useModalForm to detect when the modal is closed. The useEffect hook will run whenever the state changes, and if it becomes false (indicating the modal has closed), it will trigger the invalidation.close behavior or relying on unsupported props.useEffect hook would indeed run on mount, which is not the desired behavior in this case. Let's refine our approach to avoid this issue.false, so we just set it to true and don't run the invalidation.true, we check if the modal has been closed () and only then run the invalidation.useCustomModalFormautoSubmitCloseinvalidateOnCloseautoSaveuseInvalidatecustomCloseonCloseonCloseonCloseonCloseinvalidatesinvalidatesmodalPropsmodalProps.onCloseReact.useEffectvisiblevisiblevisibleuseRefisMountedisMounted.currentisMounted.current!visibleconst modalForm = useModalForm({
modalProps: {
autoSubmitClose: false,
},
});const modalForm = useModalForm({
autoSave: {
enabled: true,
invalidateOnClose: true,
},
});import { useInvalidate } from "@refinedev/core";
const invalidate = useInvalidate();
const { close } = useModalForm();
const handleClose = () => {
invalidate({
resource: "your-resource",
invalidates: ["list", "many", "detail"],
});
close();
};const { close: originalClose, ...rest } = useModalForm({
// other options
});import { useInvalidate } from "@refinedev/core";
const invalidate = useInvalidate();
const customClose = () => {
invalidate({
resource: "your-resource",
invalidates: ["list", "many", "detail"],
});
originalClose();
};return (
<Modal
{...rest.modalProps}
onCancel={customClose}
>
{/* Your form content */}
</Modal>
);import { useModalForm } from "@refinedev/antd";
import { useInvalidate } from "@refinedev/core";const invalidate = useInvalidate();
const { modalProps, formProps } = useModalForm({
// other options
modalProps: {
onClose: () => {
invalidate({
resource: "your-resource",
invalidates: ["list", "many", "detail"],
});
},
},
});import { useModalForm } from "@refinedev/antd";
import { useInvalidate } from "@refinedev/core";
import { useEffect } from "react";
const invalidate = useInvalidate();
const { modalProps, formProps, close, visible } = useModalForm({
// other options
});
useEffect(() => {
if (!visible) {
invalidate({
resource: "your-resource",
invalidates: ["list", "many", "detail"],
});
}
}, [visible]);import { useModalForm } from "@refinedev/antd";
import { useInvalidate } from "@refinedev/core";
import { useEffect, useRef } from "react";
const invalidate = useInvalidate();
const { modalProps, formProps, visible } = useModalForm({
// other options
});
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) {
if (!visible) {
invalidate({
resource: "your-resource",
invalidates: ["list", "many", "detail"],
});
}
} else {
isMounted.current = true;
}
}, [visible]);