From 13aadddf19ac9e0edc081bf33b5db741a87ca0c6 Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 29 Oct 2025 13:17:01 +0100 Subject: [PATCH 1/2] 2226: Fixes form caching bug orccuring in some situations where the same for is loading --- .../src/core/PydanticFormHandler.tsx | 27 ++++++++++++++++--- .../src/core/hooks/useApiProvider.tsx | 4 +-- .../src/core/hooks/useLabelProvider.tsx | 16 +++-------- .../src/core/hooks/usePydanticForm.tsx | 11 ++++---- 4 files changed, 36 insertions(+), 22 deletions(-) diff --git a/frontend/packages/pydantic-forms/src/core/PydanticFormHandler.tsx b/frontend/packages/pydantic-forms/src/core/PydanticFormHandler.tsx index be55eab4..e6836ed9 100644 --- a/frontend/packages/pydantic-forms/src/core/PydanticFormHandler.tsx +++ b/frontend/packages/pydantic-forms/src/core/PydanticFormHandler.tsx @@ -1,9 +1,11 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import type { FieldValues } from 'react-hook-form'; +import _ from 'lodash'; + import { PydanticFormValidationErrorContext } from '@/PydanticForm'; import { useGetConfig, usePydanticForm } from '@/core/hooks'; -import { PydanticFormHandlerProps } from '@/types'; +import { PydanticFormHandlerProps, PydanticFormSuccessResponse } from '@/types'; import { getHashForArray } from '@/utils'; import { ReactHookForm } from './ReactHookForm'; @@ -19,6 +21,7 @@ export const PydanticFormHandler = ({ const formStepsRef = useRef([]); const [initialValues, setInitialValues] = useState(); const [currentFormKey, setCurrentFormKey] = useState(formKey); + const [cacheKey, setCacheKey] = useState(_.uniqueId(formKey)); const formInputHistoryRef = useRef>( new Map(), ); @@ -47,6 +50,16 @@ export const PydanticFormHandler = ({ } }, []); + const handleSuccess = ( + fieldValues: FieldValues[], + response: PydanticFormSuccessResponse, + ) => { + if (onSuccess) { + onSuccess(fieldValues, response); + } + setCacheKey(_.uniqueId(currentFormKey)); + }; + const { validationErrorsDetails, apiError, @@ -55,7 +68,14 @@ export const PydanticFormHandler = ({ isLoading, pydanticFormSchema, defaultValues, - } = usePydanticForm(formKey, config, formStepsRef, onSuccess, formStep); + } = usePydanticForm( + formKey, + config, + formStepsRef, + cacheKey, + handleSuccess, + formStep, + ); const handleStepSubmit = useCallback( (fieldValues: FieldValues) => { @@ -74,10 +94,11 @@ export const PydanticFormHandler = ({ }, [restoreHistory]); const handleCancel = useCallback(() => { + setCacheKey(_.uniqueId(currentFormKey)); if (onCancel) { onCancel(); } - }, [onCancel]); + }, [currentFormKey, onCancel]); return ( ( - [formKey, formInputData], + [formKey, formInputData, cacheKey], ([formKey, formInputData]) => { const requestBody = formInputData; @@ -70,7 +71,6 @@ export function useApiProvider( throw new Error(error); }); }, - // swr config { fallback: {}, revalidateIfStale: true, diff --git a/frontend/packages/pydantic-forms/src/core/hooks/useLabelProvider.tsx b/frontend/packages/pydantic-forms/src/core/hooks/useLabelProvider.tsx index f7e9de9a..b7b06b2a 100644 --- a/frontend/packages/pydantic-forms/src/core/hooks/useLabelProvider.tsx +++ b/frontend/packages/pydantic-forms/src/core/hooks/useLabelProvider.tsx @@ -12,7 +12,7 @@ * * Disabled revalidate / refresh system of SWR, this would cause submissions */ -import useSWR, { SWRConfiguration } from 'swr'; +import useSWR from 'swr'; import { PydanticFormLabelProvider, @@ -22,36 +22,28 @@ import { export function useLabelProvider( labelProvider?: PydanticFormLabelProvider, formKey?: string, - id?: string | null, - cacheKey?: number, - swrConfig?: SWRConfiguration, + cacheKey?: string, ) { return useSWR( // cache key - [labelProvider, formKey, id, swrConfig, cacheKey], + [labelProvider, formKey, cacheKey], // return val async () => { if (labelProvider) { return labelProvider({ formKey: formKey || '', - id, + id: cacheKey, }); } }, - - // swr config { fallback: {}, - - // we dont want to refresh the form structure automatically revalidateIfStale: false, revalidateOnReconnect: false, revalidateOnFocus: false, keepPreviousData: true, shouldRetryOnError: false, - - ...swrConfig, }, ); } diff --git a/frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx b/frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx index 7f2bc14b..1796da6b 100644 --- a/frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx +++ b/frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx @@ -31,7 +31,8 @@ export function usePydanticForm( formKey: string, config: PydanticFormConfig, formStepsRef: React.MutableRefObject, - onSuccess?: ( + cacheKey: string, + handleSuccess?: ( fieldValues: FieldValues[], response: PydanticFormSuccessResponse, ) => void, @@ -56,7 +57,7 @@ export function usePydanticForm( // fetch the labels of the form, can also contain default values const { data: formLabels, isLoading: isLoadingFormLabels } = - useLabelProvider(labelProvider, formKey); + useLabelProvider(labelProvider, formKey, cacheKey); const formSteps = formStepsRef.current; @@ -69,7 +70,7 @@ export function usePydanticForm( data: apiResponse, isLoading: isLoadingSchema, error: apiError, - } = useApiProvider(formKey, formInputData, apiProvider); + } = useApiProvider(formKey, formInputData, apiProvider, cacheKey); // extract the JSON schema to a more usable custom schema const { pydanticFormSchema, isLoading: isParsingSchema } = @@ -105,8 +106,8 @@ export function usePydanticForm( ); return; } else if (apiResponse.type === PydanticFormApiResponseType.SUCCESS) { - if (onSuccess) { - onSuccess(formInputData, apiResponse); + if (handleSuccess) { + handleSuccess(formInputData, apiResponse); } setValidationErrorsDetails(null); setIsFullFilled(true); From c22b676030831f088c878e06d6eac9e1d34a110c Mon Sep 17 00:00:00 2001 From: Ruben van Leeuwen Date: Wed, 29 Oct 2025 13:17:46 +0100 Subject: [PATCH 2/2] 2226: Adds changeset --- frontend/.changeset/thin-pets-doubt.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 frontend/.changeset/thin-pets-doubt.md diff --git a/frontend/.changeset/thin-pets-doubt.md b/frontend/.changeset/thin-pets-doubt.md new file mode 100644 index 00000000..1079257b --- /dev/null +++ b/frontend/.changeset/thin-pets-doubt.md @@ -0,0 +1,5 @@ +--- +'pydantic-forms': patch +--- + +Fixes form caching bug