Enhance MonitorDataOutput (#11458)

* Enhance MonitorDataOutput

- Optionally pass QueryClient
- Required when running outside of <ApiContext />

* Fix default base URL if not specified

* Remove "allow_null" from Mantine props

* Bump lib version to 0.8.2

* Bump CHANGELOG.md

src/frontend/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 This file contains historical changelog information for the InvenTree UI components library.
 
+### 0.8.2 - March 2026
+
+Bug fixes for the `monitorDataOutput` hook - https://github.com/inventree/InvenTree/pull/11458
+
 ### 0.8.0 - March 2026
 
 Exposes the `monitorDataOutput` hook, which allows plugins to monitor the output of a long-running task and display notifications when the task is complete. This is useful for plugins that need to perform long-running tasks and want to provide feedback to the user when the task is complete.

src/frontend/lib/hooks/MonitorDataOutput.tsx

@@ -2,7 +2,7 @@ import { t } from '@lingui/core/macro';
 import { useDocumentVisibility } from '@mantine/hooks';
 import { notifications, showNotification } from '@mantine/notifications';
 import { IconCircleCheck, IconExclamationCircle } from '@tabler/icons-react';
-import { useQuery } from '@tanstack/react-query';
+import { type QueryClient, useQuery } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
 import { useEffect, useState } from 'react';
 import { ProgressBar } from '../components/ProgressBar';
@@ -14,11 +14,13 @@ import { apiUrl } from '../functions/Api';
  */
 export default function monitorDataOutput({
   api,
+  queryClient,
   title,
   hostname,
   id
 }: {
   api: AxiosInstance;
+  queryClient?: QueryClient;
   title: string;
   hostname?: string;
   id?: number;
@@ -41,82 +43,86 @@ export default function monitorDataOutput({
     } else setLoading(false);
   }, [id, title]);
 
-  useQuery({
+  useQuery(
-    enabled: !!id && loading && visibility === 'visible',
+    {
-    refetchInterval: 500,
+      enabled: !!id && loading && visibility === 'visible',
-    queryKey: ['data-output', id, title],
+      refetchInterval: 500,
-    queryFn: () =>
+      queryKey: ['data-output', id, title],
-      api
+      queryFn: () =>
-        .get(apiUrl(ApiEndpoints.data_output, id))
+        api
-        .then((response) => {
+          .get(apiUrl(ApiEndpoints.data_output, id))
-          const data = response?.data ?? {};
+          .then((response) => {
+            const data = response?.data ?? {};
 
-          if (!!data.errors || !!data.error) {
+            if (!!data.errors || !!data.error) {
+              setLoading(false);
+
+              const error: string =
+                data?.error ?? data?.errors?.error ?? t`Process failed`;
+
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: false,
+                icon: <IconExclamationCircle />,
+                autoClose: 2500,
+                title: title,
+                message: error,
+                color: 'red'
+              });
+            } else if (data.complete) {
+              setLoading(false);
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: false,
+                autoClose: 2500,
+                title: title,
+                message: t`Process completed successfully`,
+                color: 'green',
+                icon: <IconCircleCheck />
+              });
+
+              if (data.output) {
+                const url = data.output;
+                const base = hostname ?? window.location.origin;
+
+                const downloadUrl = new URL(url, base);
+
+                window.open(downloadUrl.toString(), '_blank');
+              }
+            } else {
+              notifications.update({
+                id: `data-output-${id}`,
+                loading: true,
+                autoClose: false,
+                withCloseButton: false,
+                message: (
+                  <ProgressBar
+                    size='lg'
+                    maximum={data.total}
+                    value={data.progress}
+                    progressLabel={data.total > 0}
+                    animated
+                  />
+                )
+              });
+            }
+
+            return data;
+          })
+          .catch((error: Error) => {
+            console.error('Error in monitorDataOutput:', error);
             setLoading(false);
-
-            const error: string =
-              data?.error ?? data?.errors?.error ?? t`Process failed`;
-
             notifications.update({
               id: `data-output-${id}`,
               loading: false,
-              icon: <IconExclamationCircle />,
               autoClose: 2500,
               title: title,
-              message: error,
+              message: error.message || t`Process failed`,
               color: 'red'
             });
-          } else if (data.complete) {
+            return {};
-            setLoading(false);
+          })
-            notifications.update({
+    },
-              id: `data-output-${id}`,
+    queryClient
-              loading: false,
+  );
-              autoClose: 2500,
-              title: title,
-              message: t`Process completed successfully`,
-              color: 'green',
-              icon: <IconCircleCheck />
-            });
-
-            if (data.output) {
-              const url = data.output;
-              const base = hostname ?? window.location.hostname;
-
-              const downloadUrl = new URL(url, base);
-
-              window.open(downloadUrl.toString(), '_blank');
-            }
-          } else {
-            notifications.update({
-              id: `data-output-${id}`,
-              loading: true,
-              autoClose: false,
-              withCloseButton: false,
-              message: (
-                <ProgressBar
-                  size='lg'
-                  maximum={data.total}
-                  value={data.progress}
-                  progressLabel={data.total > 0}
-                  animated
-                />
-              )
-            });
-          }
-
-          return data;
-        })
-        .catch(() => {
-          setLoading(false);
-          notifications.update({
-            id: `data-output-${id}`,
-            loading: false,
-            autoClose: 2500,
-            title: title,
-            message: t`Process failed`,
-            color: 'red'
-          });
-          return {};
-        })
-  });
 }

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@inventreedb/ui",
     "description": "UI components for the InvenTree project",
-    "version": "0.8.0",
+    "version": "0.8.2",
     "private": false,
     "type": "module",
     "license": "MIT",

src/frontend/src/components/forms/fields/ApiFormField.tsx

@@ -85,6 +85,7 @@ export function ApiFormField({
       onValueChange: undefined,
       adjustFilters: undefined,
       adjustValue: undefined,
+      allow_null: undefined,
       read_only: undefined,
       children: undefined,
       exclude: undefined

src/frontend/src/components/forms/fields/RelatedModelField.tsx

@@ -380,6 +380,7 @@ export function RelatedModelField({
       onValueChange: undefined,
       adjustFilters: undefined,
       exclude: undefined,
+      allow_null: undefined,
       read_only: undefined
     };
   }, [definition]);