2226 caching issues (#229)

* 2226: Store apiResponse with useState in usePydanticForm to avoid useEffect run

* 2226: Align npm version in packagelock

* 2226: Typescript fixes

* 2226: Adds changeset

---------

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

Author: DutchBen

frontend/.changeset/lazy-shirts-occur.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Fixes caching issues when running same form twice

frontend/package-lock.json

@@ -20,15 +20,21 @@ import {
     PydanticFormApiProvider,
     PydanticFormApiResponse,
     PydanticFormApiResponseType,
+    PydanticFormDefinitionResponse,
+    PydanticFormSuccessResponse,
+    PydanticFormValidationResponse,
 } from '@/types';
 
 export function useApiProvider(
     formKey: string,
     formId: string,
     formInputData: FieldValues[],
     apiProvider: PydanticFormApiProvider,
+    setApiResponse: React.Dispatch<
+        React.SetStateAction<PydanticFormApiResponse | undefined>
+    >,
 ) {
-    return useSWR<PydanticFormApiResponse>(
+    return useSWR(
         [formKey, formInputData, formId],
         ([formKey, formInputData]) => {
             const requestBody = formInputData;
@@ -42,27 +48,33 @@ export function useApiProvider(
                         throw new Error('No API Response');
                     }
                     if (request.form) {
-                        return {
+                        const formDefinitionResponse = {
                             type: PydanticFormApiResponseType.FORM_DEFINITION,
                             form: request.form,
                             meta: request.meta,
-                        } as PydanticFormApiResponse;
+                        } as PydanticFormDefinitionResponse;
+                        setApiResponse(formDefinitionResponse);
+                        return;
                     }
                     if (request.validation_errors) {
-                        return {
+                        const formValidationResponse = {
                             type: PydanticFormApiResponseType.VALIDATION_ERRORS,
                             validation_errors: request.validation_errors,
-                        } as PydanticFormApiResponse;
+                        } as PydanticFormValidationResponse;
+                        setApiResponse(formValidationResponse);
+                        return;
                     }
                     if (
                         request.status &&
                         request.status >= 200 &&
                         request.status < 300
                     ) {
-                        return {
+                        const formSuccessResponse = {
                             type: PydanticFormApiResponseType.SUCCESS,
                             data: request.data,
-                        } as PydanticFormApiResponse;
+                        } as PydanticFormSuccessResponse;
+                        setApiResponse(formSuccessResponse);
+                        return;
                     }
                     throw new Error('Unknown API Response code');
                 })

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

@@ -6,6 +6,7 @@ import {
     getValidationErrorDetailsFromResponse,
 } from '@/core/helper';
 import type {
+    PydanticFormApiResponse,
     PydanticFormConfig,
     PydanticFormSchema,
     PydanticFormSchemaRawJson,
@@ -73,6 +74,9 @@ export function usePydanticForm(
     );
     const [isFullFilled, setIsFullFilled] = useState<boolean>(false);
     const [isSending, setIsSending] = useState<boolean>(false);
+    const [apiResponse, setApiResponse] = useState<
+        PydanticFormApiResponse | undefined
+    >(undefined);
     const [rawSchema, setRawSchema] =
         useState<PydanticFormSchemaRawJson>(emptyRawSchema);
     const [hasNext, setHasNext] = useState<boolean>(false);
@@ -92,11 +96,13 @@ export function usePydanticForm(
     }, [formStep, formSteps]);
 
     // fetch API response with form definition
-    const {
-        data: apiResponse,
-        isLoading: isLoadingSchema,
-        error: apiError,
-    } = useApiProvider(formKey, formId, formInputData, apiProvider);
+    const { isLoading: isLoadingSchema, error: apiError } = useApiProvider(
+        formKey,
+        formId,
+        formInputData,
+        apiProvider,
+        setApiResponse,
+    );
 
     // extract the JSON schema to a more usable custom schema
     const { pydanticFormSchema, isLoading: isParsingSchema } =