2226 caching bug (#193)

* 2226: Fixes form caching bug orccuring in some situations where the same for is loading

* 2226: Adds changeset

---------

Co-authored-by: Ruben van Leeuwen <ruben.vanleeuwen@surf.nl>

Author: DutchBen

frontend/.changeset/thin-pets-doubt.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes form caching bug

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<FieldValues[]>([]);
     const [initialValues, setInitialValues] = useState<FieldValues>();
     const [currentFormKey, setCurrentFormKey] = useState<string>(formKey);
+    const [cacheKey, setCacheKey] = useState<string>(_.uniqueId(formKey));
     const formInputHistoryRef = useRef<Map<string, FieldValues>>(
         new Map<string, object>(),
     );
@@ -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 (
         <PydanticFormValidationErrorContext.Provider

frontend/packages/pydantic-forms/src/core/hooks/useApiProvider.tsx

@@ -26,9 +26,10 @@ export function useApiProvider(
     formKey: string,
     formInputData: FieldValues[], // TODO: This doesn't seem right
     apiProvider: PydanticFormApiProvider,
+    cacheKey: string,
 ) {
     return useSWR<PydanticFormApiResponse>(
-        [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,

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<PydanticFormLabelProviderResponse | undefined>(
         // 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,
         },
     );
 }

frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx

@@ -31,7 +31,8 @@ export function usePydanticForm(
     formKey: string,
     config: PydanticFormConfig,
     formStepsRef: React.MutableRefObject<FieldValues[]>,
-    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);