delete confirm modification
I want to modify the content modal that appears when you try to erase a entry using the deleteButton, being more specific i want to add a disable for 3 seconds to the buttons of the modal
KHi @Lost Spartan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. 
K----------------------
I understand you want to modify the confirmation modal that appears when using the component in refine, specifically to disable the buttons for 3 seconds.
Refine's component uses a confirmation dialog/modal that appears when you try to delete an entry. The implementation varies slightly depending on which UI framework you're using (Material UI, Chakra UI, or Mantine).
Based on the knowledge sources, there are a few approaches you can take:
You can create your own custom DeleteButton by using the hook which provides all the necessary values and functions:
```jsx
import { useDeleteButton } from "@refinedev/core";
import { useState, useEffect } from "react";
I understand you want to modify the confirmation modal that appears when using the component in refine, specifically to disable the buttons for 3 seconds.
Refine's component uses a confirmation dialog/modal that appears when you try to delete an entry. The implementation varies slightly depending on which UI framework you're using (Material UI, Chakra UI, or Mantine).
Based on the knowledge sources, there are a few approaches you can take:
Option 1: Create a custom DeleteButton component
You can create your own custom DeleteButton by using the hook which provides all the necessary values and functions:
```jsx
import { useDeleteButton } from "@refinedev/core";
import { useState, useEffect } from "react";
Kconst CustomDeleteButton = (props) => {
const {
onConfirm,
confirmTitle,
confirmOkLabel,
cancelLabel,
...deleteButtonProps
} = useDeleteButton(props);
const [isModalOpen, setIsModalOpen] = useState(false);
const [buttonsDisabled, setButtonsDisabled] = useState(true);
useEffect(() => {
let timer;
if (isModalOpen && buttonsDisabled) {
timer = setTimeout(() => {
setButtonsDisabled(false);
}, 3000);
}
return () => clearTimeout(timer);
}, [isModalOpen, buttonsDisabled]);
const handleOpen = () => {
setIsModalOpen(true);
setButtonsDisabled(true);
};
const handleClose = () => {
setIsModalOpen(false);
};
const handleConfirm = () => {
onConfirm();
setIsModalOpen(false);
};
// Implement your UI-specific button and modal here
// with the buttons disabled for 3 seconds
return (
<>
<Button onClick={handleOpen}>Delete</Button>
<Modal open={isModalOpen} onClose={handleClose}>
<div>
<h2>{confirmTitle}</h2>
<Button
onClick={handleClose}
disabled={buttonsDisabled}
>
{cancelLabel}
</Button>
<Button
onClick={handleConfirm}
disabled={buttonsDisabled}
>
{confirmOkLabel}
</Button>
</div>
</Modal>
</>
);
};
```
Refine allows you to "swizzle" (customize) built-in components using the Refine CLI. This is mentioned in the documentation for the DeleteButton components:
const {
onConfirm,
confirmTitle,
confirmOkLabel,
cancelLabel,
...deleteButtonProps
} = useDeleteButton(props);
const [isModalOpen, setIsModalOpen] = useState(false);
const [buttonsDisabled, setButtonsDisabled] = useState(true);
useEffect(() => {
let timer;
if (isModalOpen && buttonsDisabled) {
timer = setTimeout(() => {
setButtonsDisabled(false);
}, 3000);
}
return () => clearTimeout(timer);
}, [isModalOpen, buttonsDisabled]);
const handleOpen = () => {
setIsModalOpen(true);
setButtonsDisabled(true);
};
const handleClose = () => {
setIsModalOpen(false);
};
const handleConfirm = () => {
onConfirm();
setIsModalOpen(false);
};
// Implement your UI-specific button and modal here
// with the buttons disabled for 3 seconds
return (
<>
<Button onClick={handleOpen}>Delete</Button>
<Modal open={isModalOpen} onClose={handleClose}>
<div>
<h2>{confirmTitle}</h2>
<Button
onClick={handleClose}
disabled={buttonsDisabled}
>
{cancelLabel}
</Button>
<Button
onClick={handleConfirm}
disabled={buttonsDisabled}
>
{confirmOkLabel}
</Button>
</div>
</Modal>
</>
);
};
```
Option 2: Swizzle the DeleteButton component
Refine allows you to "swizzle" (customize) built-in components using the Refine CLI. This is mentioned in the documentation for the DeleteButton components:
Good to know: You can swizzle this component to customize it with the Refine CLI
KMaterial UI DeleteButton
Chakra UI DeleteButton
Mantine DeleteButton
After swizzling, you can modify the component to add the 3-second disable functionality.
The DeleteButton components accept various props for customization, including:
For the most direct and flexible approach, I recommend option 1 or 2, as they give you full control over the modal behavior.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
Chakra UI DeleteButton
Mantine DeleteButton
After swizzling, you can modify the component to add the 3-second disable functionality.
Option 3: Use the existing customization props
The DeleteButton components accept various props for customization, including:
For the most direct and flexible approach, I recommend option 1 or 2, as they give you full control over the modal behavior.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai how would i do the swizzle option?
KLet me check the knowledge base for you again. One moment! 
K----------------------
I'll explain how to use the swizzle command to customize the DeleteButton component in refine.
The swizzle command allows you to export components from Refine packages to your app so you can customize them. Here's how to do it:
I'll explain how to use the swizzle command to customize the DeleteButton component in refine.
Using the Swizzle Command
The swizzle command allows you to export components from Refine packages to your app so you can customize them. Here's how to do it:
- Run the following command in your terminal:
- You'll be prompted to select which package you want to swizzle. Use the arrow keys to select your UI framework (e.g., , , , or ):
- After selecting the package, you'll be prompted to select which component you want to swizzle. Navigate to the DeleteButton component:
- Once you select the DeleteButton, the CLI will create the component files in your project directory, typically under or a similar path depending on your framework.
- Now you can modify the swizzled DeleteButton component to add your 3-second disable functionality. The implementation will vary slightly depending on your UI framework, but the general approach would be to:
- Add a state variable to track if buttons are disabled
- Use a setTimeout to enable the buttons after 3 seconds
- Apply the disabled state to the buttons in the confirmation dialog
K- Swizzling is a one-way operation. Once you swizzle a component, you'll be responsible for keeping it up to date with any future changes in the Refine packages.
- You'll need to manually replace the default DeleteButton with your customized version in your imports.
- The swizzled component will be detached from the package, so you'll need to maintain it yourself.
This approach gives you full control over the DeleteButton component, allowing you to implement the 3-second disable functionality exactly as you need it.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai now that i swizzled the component i want to know how can i display properties of the row i want to delete like the name for example on the dialog
KLet me check the knowledge base for you again. One moment!
K----------------------
I understand you want to display properties of the row you're deleting (like the name) in the DeleteButton's confirmation dialog after swizzling the component.
Looking at the knowledge sources, there are a few ways to achieve this:
The DeleteButton component accepts props like that allow you to customize the confirmation dialog text. You can use these props to include record information in the dialog.
From the GitHub issue, we can see this was actually a feature request that was implemented:
Github Issue
Now that you've swizzled the DeleteButton component, you can modify it to access and display record data in the confirmation dialog. Here's how you can approach this:
```jsx
// In your swizzled DeleteButton component
import { useOne } from "@refinedev/core";
import { useState } from "react";
// ... other imports
I understand you want to display properties of the row you're deleting (like the name) in the DeleteButton's confirmation dialog after swizzling the component.
Looking at the knowledge sources, there are a few ways to achieve this:
Customizing the Confirmation Dialog Text
The DeleteButton component accepts props like that allow you to customize the confirmation dialog text. You can use these props to include record information in the dialog.
From the GitHub issue, we can see this was actually a feature request that was implemented:
Github Issue
Modifying the Swizzled Component
Now that you've swizzled the DeleteButton component, you can modify it to access and display record data in the confirmation dialog. Here's how you can approach this:
- In your swizzled DeleteButton component, you'll need to fetch the record data using the and
props.resource - You can use the hook from refine to fetch the record data before showing the confirmation dialog.
- Modify the confirmation dialog to display the record properties.
```jsx
// In your swizzled DeleteButton component
import { useOne } from "@refinedev/core";
import { useState } from "react";
// ... other imports
Kconst DeleteButton = ({
resource,
recordItemId,
confirmTitle: confirmTitleProp,
// ... other props
}) => {
const [open, setOpen] = useState(false);
const [buttonsDisabled, setButtonsDisabled] = useState(true);
// Fetch the record data
const { data } = useOne({
resource,
id: recordItemId,
queryOptions: {
enabled: !!recordItemId && !!resource,
},
});
const record = data?.data;
// Generate a dynamic confirmation title using the record data
const confirmTitle = record
?
: confirmTitleProp || "Are you sure?";
const handleClick = () => {
setOpen(true);
setButtonsDisabled(true);
// Enable buttons after 3 seconds
setTimeout(() => {
setButtonsDisabled(false);
}, 3000);
};
// ... rest of your component with the confirmation dialog
// using the confirmTitle and buttonsDisabled state
return (
<>
<Button onClick={handleClick}>Delete</Button>
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>{confirmTitle}</DialogTitle>
<DialogActions>
<Button disabled={buttonsDisabled} onClick={() => setOpen(false)}>
Cancel
</Button>
<Button disabled={buttonsDisabled} onClick={handleConfirm} color="error">
Delete
</Button>
</DialogActions>
</Dialog>
</>
);
};
useOne` hook
resource,
recordItemId,
confirmTitle: confirmTitleProp,
// ... other props
}) => {
const [open, setOpen] = useState(false);
const [buttonsDisabled, setButtonsDisabled] = useState(true);
// Fetch the record data
const { data } = useOne({
resource,
id: recordItemId,
queryOptions: {
enabled: !!recordItemId && !!resource,
},
});
const record = data?.data;
// Generate a dynamic confirmation title using the record data
const confirmTitle = record
?
: confirmTitleProp || "Are you sure?";
const handleClick = () => {
setOpen(true);
setButtonsDisabled(true);
// Enable buttons after 3 seconds
setTimeout(() => {
setButtonsDisabled(false);
}, 3000);
};
// ... rest of your component with the confirmation dialog
// using the confirmTitle and buttonsDisabled state
return (
<>
<Button onClick={handleClick}>Delete</Button>
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>{confirmTitle}</DialogTitle>
<DialogActions>
<Button disabled={buttonsDisabled} onClick={() => setOpen(false)}>
Cancel
</Button>
<Button disabled={buttonsDisabled} onClick={handleConfirm} color="error">
Delete
</Button>
</DialogActions>
</Dialog>
</>
);
};
useOne` hook
- Create a dynamic confirmation title that includes record properties
- Implement your 3-second button disable functionality
KRemember that you'll need to handle loading states and potential errors when fetching the record data.
Would you like more specific guidance for a particular UI framework?
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
Would you like more specific guidance for a particular UI framework?
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai do i have to invoke useOne to get the data or is it better to pass the data from the list view because its already there and we only pass the row.id to the delete button
KLet me check the knowledge base for you again. One moment!
K----------------------
You're absolutely right - it's more efficient to pass the data from the list view rather than making an additional API call with when the data is already available.
Looking at the examples in the knowledge sources, we can see that the DeleteButton is typically used within list components where the row data is already available:
To pass the row data to your swizzled DeleteButton, you have two options:
You can modify your DeleteButton to accept a prop:
If you don't want to modify the DeleteButton API too much, you can simply pass a custom that includes the record data:
This approach is supported by the existing DeleteButton component as shown in the GitHub issue:
Github Issue
You're absolutely right - it's more efficient to pass the data from the list view rather than making an additional API call with when the data is already available.
Looking at the examples in the knowledge sources, we can see that the DeleteButton is typically used within list components where the row data is already available:
To pass the row data to your swizzled DeleteButton, you have two options:
Option 1: Pass the record directly as a prop
You can modify your DeleteButton to accept a prop:
Option 2: Use the existing pattern with custom confirmTitle
If you don't want to modify the DeleteButton API too much, you can simply pass a custom that includes the record data:
This approach is supported by the existing DeleteButton component as shown in the GitHub issue:
Github Issue
Recommendation
KThe second option is simpler and requires fewer changes to your swizzled component. It's also more aligned with how refine's DeleteButton is designed to be used.
If you need more complex customization with the record data, the first option gives you more flexibility but requires more changes to the component API.
Either way, you're right that it's more efficient to use the data that's already available in your list view rather than making an additional API call with .
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
If you need more complex customization with the record data, the first option gives you more flexibility but requires more changes to the component API.
Either way, you're right that it's more efficient to use the data that's already available in your list view rather than making an additional API call with .
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai if im using typescript and have a schema defined should i make the deleteButton accept dynamic types for better explorations of properties of the records in the deleteButton
KLet me check the knowledge base for you again. One moment!
K----------------------
Yes, making your swizzled DeleteButton component accept dynamic types with TypeScript is a good practice for better type safety and property exploration when working with record data in refine.
Here's how you can implement generic typing for your DeleteButton component:
This approach offers several benefits:
This pattern is consistent with refine's approach to typing, as refine components like
If you're using the component in multiple places with different record types, this generic approach will make your code more maintainable and provide better developer experience through TypeScript's type checking and autocompletion features.
Yes, making your swizzled DeleteButton component accept dynamic types with TypeScript is a good practice for better type safety and property exploration when working with record data in refine.
Here's how you can implement generic typing for your DeleteButton component:
This approach offers several benefits:
- Type Safety: TypeScript will provide proper type checking for the record properties
- IntelliSense Support: Your IDE will show property suggestions when you type
- Flexibility: The component can work with different record types across various resources
This pattern is consistent with refine's approach to typing, as refine components like
useTableIf you're using the component in multiple places with different record types, this generic approach will make your code more maintainable and provide better developer experience through TypeScript's type checking and autocompletion features.
KWould you like more specific guidance on implementing this with a particular UI framework or with more complex record types?
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai also i want to modify the edit page to reload the edit page with the new values intead of going the default behaviour
KLet me check the knowledge base for you again. One moment!
K----------------------
I understand you want to modify the default behavior of the edit page in refine to reload with new values instead of redirecting to another page after a successful form submission.
By default, refine redirects to the list page after a successful edit operation, but you can customize this behavior in several ways:
You can use the property in the
This will keep the user on the edit page after submission, as mentioned in the documentation:
Refine Component
After a successful form submission, you can manually refetch the data to reload the form with updated values:
This approach is mentioned in a GitHub issue where a user wanted to refresh data after calling external APIs:
Github Issue
You can also configure the redirect behavior globally in the
This will apply to all edit forms in your application, as shown in the documentation:
Refine Component
I understand you want to modify the default behavior of the edit page in refine to reload with new values instead of redirecting to another page after a successful form submission.
By default, refine redirects to the list page after a successful edit operation, but you can customize this behavior in several ways:
Option 1: Set redirect to false in useForm
You can use the property in the
useFormThis will keep the user on the edit page after submission, as mentioned in the documentation:
Refine Component
Option 2: Use queryResult.refetch to reload data
After a successful form submission, you can manually refetch the data to reload the form with updated values:
This approach is mentioned in a GitHub issue where a user wanted to refresh data after calling external APIs:
Github Issue
Option 3: Configure global redirect behavior
You can also configure the redirect behavior globally in the
<Refine>This will apply to all edit forms in your application, as shown in the documentation:
Refine Component
Option 4: Use updateMutationOptions to control invalidation
KIf you want more control over the data refetching process, you can use the property:
This is documented in the Ant Design UI integration:
Ant Design useForm
The most straightforward approach is to use Option 1 or Option 3 to prevent redirection, combined with Option 2 to manually refetch the data after submission.
Would you like more specific guidance for implementing this with a particular UI framework?
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
This is documented in the Ant Design UI integration:
Ant Design useForm
The most straightforward approach is to use Option 1 or Option 3 to prevent redirection, combined with Option 2 to manually refetch the data after submission.
Would you like more specific guidance for implementing this with a particular UI framework?
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai Take into consideration that im using react hook form,material ui, nextjs
KLet me check the knowledge base for you again. One moment!
K----------------------
I'll provide guidance specific to your tech stack: React Hook Form, Material UI, and Next.js with refine.
Since you're using React Hook Form with refine, you'll want to use the integration. Here's how to modify the edit page to reload with new values instead of redirecting:
This approach is based on examples from the refine documentation for React Hook Form integration:
I'll provide guidance specific to your tech stack: React Hook Form, Material UI, and Next.js with refine.
Customizing Edit Page with React Hook Form in refine
Since you're using React Hook Form with refine, you'll want to use the integration. Here's how to modify the edit page to reload with new values instead of redirecting:
This approach is based on examples from the refine documentation for React Hook Form integration:
KDynamic Forms with React Hook Form
Alternatively, you can configure this behavior globally in your Next.js app by setting the redirect option in your
This is documented in the refine component options:
Refine Component Redirect
For Material UI specifically, you can follow this pattern which is similar to the examples in the documentation:
```tsx
import { Edit, Box, TextField } from "@refinedev/mui";
import { useForm, Controller } from "@refinedev/react-hook-form";
function YourEditPage() {
const {
saveButtonProps,
refineCore: { queryResult },
control,
formState: { errors },
handleSubmit,
onFinish
} = useForm();
// Custom submit handler
const submitHandler = async (values) => {
await onFinish(values);
queryResult?.refetch();
};
Global Configuration Option
Alternatively, you can configure this behavior globally in your Next.js app by setting the redirect option in your
_app.tsxThis is documented in the refine component options:
Refine Component Redirect
Material UI Edit Component Example
For Material UI specifically, you can follow this pattern which is similar to the examples in the documentation:
```tsx
import { Edit, Box, TextField } from "@refinedev/mui";
import { useForm, Controller } from "@refinedev/react-hook-form";
function YourEditPage() {
const {
saveButtonProps,
refineCore: { queryResult },
control,
formState: { errors },
handleSubmit,
onFinish
} = useForm();
// Custom submit handler
const submitHandler = async (values) => {
await onFinish(values);
queryResult?.refetch();
};
Kreturn (
<Edit saveButtonProps={{ onClick: handleSubmit(submitHandler) }}>
<Box component="form">
<Controller
control={control}
name="name"
render={({ field }) => (
<TextField
{...field}
error={!!errors?.name}
helperText={errors.name && }
margin="normal"
fullWidth
label="Name"
/>
)}
/>
{/* Other form fields */}
</Box>
</Edit>
);
}
```
This approach gives you full control over the form submission process while maintaining the Material UI styling and refine's form handling capabilities.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
<Edit saveButtonProps={{ onClick: handleSubmit(submitHandler) }}>
<Box component="form">
<Controller
control={control}
name="name"
render={({ field }) => (
<TextField
{...field}
error={!!errors?.name}
helperText={errors.name && }
margin="normal"
fullWidth
label="Name"
/>
)}
/>
{/* Other form fields */}
</Box>
</Edit>
);
}
```
This approach gives you full control over the form submission process while maintaining the Material UI styling and refine's form handling capabilities.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai the refine ui template behaviour by default sends you to the list page after the summit is correct how can i change that because even with your changes it still does that
KLet me check the knowledge base for you again. One moment!
K----------------------
I understand that despite trying the previous approaches, the form is still redirecting to the list page after submission. Let's look at the specific ways to change this default behavior in refine.
Based on the knowledge sources, there are several ways to control the redirect behavior after form submission:
The most direct way is to set the property to
This is documented in the refine docs:
Redirect property in useForm
You can configure this behavior globally in your
This is documented here:
Refine Component Redirect
If the above methods aren't working, you can try using the function returned from
This approach is mentioned in the documentation:
Redirect function in useForm
I understand that despite trying the previous approaches, the form is still redirecting to the list page after submission. Let's look at the specific ways to change this default behavior in refine.
Based on the knowledge sources, there are several ways to control the redirect behavior after form submission:
- Set redirect option in useForm
The most direct way is to set the property to
falseuseFormThis is documented in the refine docs:
Redirect property in useForm
- Configure global redirect behavior
You can configure this behavior globally in your
<Refine>This is documented here:
Refine Component Redirect
- Use the redirect function from useForm
If the above methods aren't working, you can try using the function returned from
useFormThis approach is mentioned in the documentation:
Redirect function in useForm
K- Check for conflicting settings
If you're still experiencing redirection, check for:
- Global settings in
component that might override your local settings<Refine> - UI template components that might have their own redirect logic
- Make sure you're using the correct property path for your specific UI integration
This structure is important as React Hook Form's integration with refine uses a slightly different API structure than the core useForm hook.
Let me know if these approaches help or if you need more specific guidance for your implementation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai excelent with those changes it works as i want but i noticed that when doing the queryResult?.refetch() its stays loading on the form and the refresh button of the edit form how can i fix that?, is it because queryresult is deprecated
KLet me check the knowledge base for you again. One moment!
K----------------------
I understand you're experiencing an issue where the form stays in a loading state after using . This could indeed be related to the fact that
According to the documentation,
Documentation > Docs > Ui-integrations > Ant-design > Hooks > useForm > Return Values
The recommended approach is to use the
Another issue could be related to React Query's setting, which is set to
Github Issue: [BUG] isLoading always false even when queryKey changes
You can modify this behavior globally in your Refine configuration:
I understand you're experiencing an issue where the form stays in a loading state after using . This could indeed be related to the fact that
queryResultAccording to the documentation,
queryResultqueryResultdeprecated
This prop is deprecated and will be removed in the future versions. Useinstead.query
Documentation > Docs > Ui-integrations > Ant-design > Hooks > useForm > Return Values
The recommended approach is to use the
queryqueryResultAnother issue could be related to React Query's setting, which is set to
trueGithub Issue: [BUG] isLoading always false even when queryKey changes
You can modify this behavior globally in your Refine configuration:
KIf you're still experiencing issues, you might need to handle the loading state manually. You can check the specific loading states from the query object:
For the refresh button specifically, you might need to customize it to use the correct query reference:
This approach should help resolve the loading state issue after refetching data in your edit form.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
For the refresh button specifically, you might need to customize it to use the correct query reference:
This approach should help resolve the loading state issue after refetching data in your edit form.
----------------------
Note: you can ask me a follow up question by @ mentioning me again
----------------------
K@244898948488101898 Kapa.ai is still learning and improving, please let me know how I did by reacting below.
E@kapa.ai can the issue be that in implemented this code to get the data for the edit view?
const { data, isLoading } = useOne({
resource: "students",
id,
});
const { data, isLoading } = useOne({
resource: "students",
id,
});
KLet me check the knowledge base for you again. One moment!
K----------------------
Yes, that could definitely be the issue. When you're using directly in your edit view alongside
Looking at the knowledge sources, I can see that the hook (which is similar to in this context) has a similar issue described in a GitHub issue:
Github Issue: [BUG] setShowId is not triggering queryResult: isLoading, isError on useShow
The recommended approach is to rely on the query object from
This way, when you call , the loading states will be properly managed by the same query instance that's handling your form data.
If you need to access the record data before the form is ready, you can use the
Yes, that could definitely be the issue. When you're using directly in your edit view alongside
useFormLooking at the knowledge sources, I can see that the hook (which is similar to in this context) has a similar issue described in a GitHub issue:
When trying to change viewing record with , and are not triggered.
Github Issue: [BUG] setShowId is not triggering queryResult: isLoading, isError on useShow
The recommended approach is to rely on the query object from
useFormThis way, when you call , the loading states will be properly managed by the same query instance that's handling your form data.
If you need to access the record data before the form is ready, you can use the
queryOptionsuseForm