adds abort controllers to docinfo and form actions

payloadcms · Oct 7, 2024 · 8dcb2ea · 8dcb2ea
1 parent 0da4326
commit 8dcb2ea
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 7 deletions.
diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx
@@ -81,13 +81,7 @@ export const Form: React.FC<FormProps> = (props) => {
 
   const { getFormState } = useServerFunctions()
 
-  const {
-    config,
-    config: {
-      routes: { api },
-      serverURL,
-    },
-  } = useConfig()
+  const { config } = useConfig()
 
   const [disabled, setDisabled] = useState(disabledFromProps || false)
   const [isMounted, setIsMounted] = useState(false)
@@ -97,6 +91,8 @@ export const Form: React.FC<FormProps> = (props) => {
   const [submitted, setSubmitted] = useState(false)
   const formRef = useRef<HTMLFormElement>(null)
   const contextRef = useRef({} as FormContextType)
+  const abortControllerRef = useRef(new AbortController())
+  const abortControllerRef2 = useRef(new AbortController())
 
   const fieldsReducer = useReducer(fieldReducer, {}, () => initialState)
 
@@ -454,13 +450,25 @@ export const Form: React.FC<FormProps> = (props) => {
 
   const reset = useCallback(
     async (data: unknown) => {
+      if (abortControllerRef.current) {
+        try {
+          abortControllerRef.current.abort()
+        } catch (error) {
+          // swallow error
+        }
+      }
+
+      const abortController = new AbortController()
+      abortControllerRef.current = abortController
+
       const { state: newState } = await getFormState({
         id,
         collectionSlug,
         data,
         globalSlug,
         operation,
         schemaPath: collectionSlug || globalSlug,
+        signal: abortController.signal,
       })
 
       contextRef.current = { ...initContextState } as FormContextType
@@ -481,11 +489,23 @@ export const Form: React.FC<FormProps> = (props) => {
 
   const getFieldStateBySchemaPath = useCallback(
     async ({ data, schemaPath }) => {
+      if (abortControllerRef2.current) {
+        try {
+          abortControllerRef2.current.abort()
+        } catch (_err) {
+          // swallow error
+        }
+      }
+
+      const abortController = new AbortController()
+      abortControllerRef2.current = abortController
+
       const { state: fieldSchema } = await getFormState({
         collectionSlug,
         data,
         globalSlug,
         schemaPath,
+        signal: abortController.signal,
       })
 
       return fieldSchema
@@ -530,6 +550,30 @@ export const Form: React.FC<FormProps> = (props) => {
     [getFieldStateBySchemaPath, dispatchFields],
   )
 
+  // clean on unmount
+  useEffect(() => {
+    const re1 = abortControllerRef.current
+    const re2 = abortControllerRef2.current
+
+    return () => {
+      if (re1) {
+        try {
+          re1.abort()
+        } catch (_err) {
+          // swallow error
+        }
+      }
+
+      if (re2) {
+        try {
+          re2.abort()
+        } catch (_err) {
+          // swallow error
+        }
+      }
+    }
+  }, [])
+
   useEffect(() => {
     if (initializingFromProps !== undefined) {
       setInitializing(initializingFromProps)

diff --git a/packages/ui/src/providers/DocumentInfo/index.tsx b/packages/ui/src/providers/DocumentInfo/index.tsx
@@ -68,6 +68,7 @@ const DocumentInfo: React.FC<
   const { user } = useAuth()
 
   const { getFormState } = useServerFunctions()
+  const abortControllerRef = useRef(new AbortController())
 
   const collectionConfig = collections.find((c) => c.slug === collectionSlug)
   const globalConfig = globals.find((g) => g.slug === globalSlug)
@@ -487,6 +488,17 @@ const DocumentInfo: React.FC<
 
   const onSave = React.useCallback<DocumentInfoContext['onSave']>(
     async (json) => {
+      if (abortControllerRef.current) {
+        try {
+          abortControllerRef.current.abort()
+        } catch (_err) {
+          // swallow error
+        }
+      }
+
+      const abortController = new AbortController()
+      abortControllerRef.current = abortController
+
       if (typeof onSaveFromProps === 'function') {
         void onSaveFromProps(json)
       }
@@ -504,6 +516,7 @@ const DocumentInfo: React.FC<
         locale,
         operation,
         schemaPath: collectionSlug || globalSlug,
+        signal: abortController.signal,
       })
 
       setInitialState(newState)
@@ -549,6 +562,7 @@ const DocumentInfo: React.FC<
             locale,
             operation,
             schemaPath: collectionSlug || globalSlug,
+            signal: abortController.signal,
           })
 
           if ('errors' in result) {
@@ -647,6 +661,21 @@ const DocumentInfo: React.FC<
     hasPublishPermission,
   ])
 
+  // clean on unmount
+  useEffect(() => {
+    const re1 = abortControllerRef.current
+
+    return () => {
+      if (re1) {
+        try {
+          re1.abort()
+        } catch (_err) {
+          // swallow error
+        }
+      }
+    }
+  }, [])
+
   const action: string = React.useMemo(() => {
     const docURL = `${baseURL}${pluralType === 'globals' ? `/globals` : ''}/${slug}${id ? `/${id}` : ''}`
     const params = {