Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions .changeset/fix-create-modal-cached-data.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
"@refinedev/refine-core": patch
"@refinedev/refine-react-hook-form": patch
---

fix(core, react-hook-form): prevent cached show-page data from overwriting create modal defaultValues

When opening a create modal on a show page for the same resource, the form's `defaultValues` were overwritten by cached data from the show page's `useOne` query. This happened because `useForm` passed the URL-derived `id` to `useOne` even for create actions, causing a query key collision with the cached entry.

- **core:** Don't pass `id` to `useOne` for create actions, preventing the cache key collision at the source.
- **react-hook-form:** Guard the `useModalForm` visibility reset effect against create actions.
2 changes: 1 addition & 1 deletion packages/core/src/hooks/form/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ export const useForm = <

const queryResult = useOne<TQueryFnData, TError, TData>({
resource: identifier,
id,
id: isCreate ? undefined : id,
queryOptions: {
// Only enable the query if it's not a create action and the `id` is defined
...props.queryOptions,
Expand Down
4 changes: 2 additions & 2 deletions packages/react-hook-form/src/useModalForm/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export const useModalForm = <

// compensate for setting of initial form values in useForm since it doesnt track modal visibility
React.useEffect(() => {
if (!visible || !query?.data?.data) return;
if (!visible || !query?.data?.data || action === "create") return;

const formData = query.data.data;
if (!formData) return;
Expand All @@ -197,7 +197,7 @@ export const useModalForm = <
keepDirtyValues: true,
}),
});
}, [visible, query?.data?.data, autoResetFormWhenClose]);
}, [visible, query?.data?.data, autoResetFormWhenClose, action]);

React.useEffect(() => {
if (initiallySynced === false && syncWithLocationKey) {
Expand Down
7 changes: 5 additions & 2 deletions packages/react-hook-form/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
type IResourceItem,
type I18nProvider,
type IRefineOptions,
type RouterProvider,
} from "@refinedev/core";

import { MockJSONServer, mockRouterProvider } from "./dataMocks";
Expand All @@ -15,6 +16,7 @@ interface ITestWrapperProps {
dataProvider?: DataProvider;
resources?: IResourceItem[];
routerInitialEntries?: string[];
routerProvider?: RouterProvider;
i18nProvider?: I18nProvider;
options?: IRefineOptions;
}
Expand All @@ -25,6 +27,7 @@ export const TestWrapper: (
dataProvider,
resources,
routerInitialEntries,
routerProvider,
i18nProvider,
options,
}) => {
Expand All @@ -34,12 +37,12 @@ export const TestWrapper: (
<Refine
i18nProvider={i18nProvider}
dataProvider={dataProvider ?? MockJSONServer}
routerProvider={mockRouterProvider()}
routerProvider={routerProvider ?? mockRouterProvider()}
resources={resources ?? [{ name: "posts" }]}
options={{
...options,
reactQuery: {
clientConfig: {
clientConfig: options?.reactQuery?.clientConfig ?? {
defaultOptions: {
queries: {
retry: false,
Expand Down