[PUI] Query cache improvements (#7609)

* Remove duplicate call to fetchUserState

* Optimize printing fields request

- Implement using useQuery hook
- Add 500ms cache

* Prevent duplicate locale setting

* Add cache time to useFilters hook

* Prevent useGenerator from fetching initially

src/frontend/src/components/buttons/PrintingActions.tsx

@@ -1,6 +1,7 @@
 import { t } from '@lingui/macro';
 import { notifications } from '@mantine/notifications';
 import { IconPrinter, IconReport, IconTags } from '@tabler/icons-react';
+import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { api } from '../../App';
@@ -32,31 +33,28 @@ export function PrintingActions({
 
   const [pluginKey, setPluginKey] = useState<string>('');
 
-  const loadFields = useCallback(() => {
+  // Fetch available printing fields via OPTIONS request
-    if (!enableLabels) {
+  const printingFields = useQuery({
-      return;
+    enabled: enableLabels,
-    }
+    queryKey: ['printingFields', modelType, pluginKey],
-
+    gcTime: 500,
-    api
+    queryFn: () =>
-      .options(apiUrl(ApiEndpoints.label_print), {
+      api
-        params: {
+        .options(apiUrl(ApiEndpoints.label_print), {
-          plugin: pluginKey || undefined
+          params: {
-        }
+            plugin: pluginKey || undefined
-      })
+          }
-      .then((response: any) => {
+        })
-        setExtraFields(extractAvailableFields(response, 'POST') || {});
+        .then((response: any) => {
-      })
+          return extractAvailableFields(response, 'POST') || {};
-      .catch(() => {});
+        })
-  }, [enableLabels, pluginKey]);
+        .catch(() => {
-
+          return {};
-  useEffect(() => {
+        })
-    loadFields();
+  });
-  }, [loadFields, pluginKey]);
-
-  const [extraFields, setExtraFields] = useState<ApiFormFieldSet>({});
 
   const labelFields: ApiFormFieldSet = useMemo(() => {
-    let fields: ApiFormFieldSet = extraFields;
+    let fields: ApiFormFieldSet = printingFields.data || {};
 
     // Override field values
     fields['template'] = {
@@ -88,7 +86,7 @@ export function PrintingActions({
     };
 
     return fields;
-  }, [extraFields, items, loadFields]);
+  }, [printingFields.data, items]);
 
   const labelModal = useCreateApiFormModal({
     url: apiUrl(ApiEndpoints.label_print),

src/frontend/src/contexts/LanguageContext.tsx

@@ -94,6 +94,12 @@ export function LanguageContext({ children }: { children: JSX.Element }) {
           locales.push('en-us');
         }
 
+        let new_locales = locales.join(', ');
+
+        if (new_locales == api.defaults.headers.common['Accept-Language']) {
+          return;
+        }
+
         // Update default Accept-Language headers
         api.defaults.headers.common['Accept-Language'] = locales.join(', ');
 

src/frontend/src/hooks/UseFilter.tsx

@@ -22,6 +22,7 @@ type UseFilterProps = {
 export function useFilters(props: UseFilterProps) {
   const query = useQuery({
     enabled: true,
+    gcTime: 500,
     queryKey: [props.url, props.method, props.params],
     queryFn: async () => {
       return await api

src/frontend/src/hooks/UseGenerator.tsx

@@ -42,13 +42,15 @@ export function useGenerator(
           ...params
         }));
       }
+
+      queryGenerator.refetch();
     },
     []
   );
 
   // API query handler
   const queryGenerator = useQuery({
-    enabled: true,
+    enabled: false,
     queryKey: ['generator', key, endpoint, debouncedQuery],
     queryFn: async () => {
       return api.post(apiUrl(endpoint), debouncedQuery).then((response) => {

src/frontend/src/pages/Auth/Logged-In.tsx

@@ -11,7 +11,7 @@ export default function Logged_In() {
 
   useEffect(() => {
     checkLoginState(navigate, location?.state?.redirectFrom);
-  }, []);
+  }, [navigate]);
 
   return (
     <>

src/frontend/src/states/states.tsx

@@ -135,7 +135,6 @@ export function fetchGlobalStates() {
   setApiDefaults();
 
   useServerApiState.getState().fetchServerApiState();
-  useUserState.getState().fetchUserState();
   useUserSettingsState.getState().fetchSettings();
   useGlobalSettingsState.getState().fetchSettings();
   useGlobalStatusState.getState().fetchStatus();