✨ Add cache and stale timers for most react query

src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx

@@ -1,4 +1,4 @@
-import { Autocomplete, createStyles, Flex, Tabs, TextInput } from '@mantine/core';
+import { Autocomplete, createStyles, Flex, Tabs } from '@mantine/core';
 import { UseFormReturnType } from '@mantine/form';
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'next-i18next';

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -16,7 +16,7 @@ export const AppPing = ({ app }: AppPingProps) => {
     (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
   const { data, isLoading } = useQuery({
-    queryKey: [`ping/${app.id}`],
+    queryKey: ['ping', { id: app.id, name: app.name }],
     queryFn: async () => {
       const response = await fetch(`/api/modules/ping?url=${encodeURI(app.url)}`);
       const isOk = app.network.okStatus.includes(response.status);

src/components/layout/header/Header.tsx

@@ -1,7 +1,6 @@
 import { Box, createStyles, Group, Header as MantineHeader, Indicator } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { CURRENT_VERSION, REPO_URL } from '../../../../data/constants';
-import { useConfigContext } from '../../../config/provider';
 import { Logo } from '../Logo';
 import { useCardStyles } from '../useCardStyles';
 import DockerMenuButton from '../../../modules/Docker/DockerModule';
@@ -14,20 +13,14 @@ export const HeaderHeight = 64;
 export function Header(props: any) {
   const { classes } = useStyles();
   const { classes: cardClasses } = useCardStyles(false);
-
-  const { config } = useConfigContext();
-
-  const [newVersionAvailable, setNewVersionAvailable] = useState<string>('');
-  useEffect(() => {
-    // Fetch Data here when component first mounted
-    fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => {
-      res.json().then((data) => {
-        if (data.tag_name > CURRENT_VERSION) {
-          setNewVersionAvailable(data.tag_name);
-        }
-      });
-    });
-  }, [CURRENT_VERSION]);
+  const { isLoading, error, data } = useQuery({
+    queryKey: ['github/latest'],
+    cacheTime: 1000 * 60 * 60 * 24,
+    staleTime: 1000 * 60 * 60 * 5,
+    queryFn: () =>
+      fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
+  });
+  const newVersionAvailable = data?.tag_name !== CURRENT_VERSION ? data?.tag_name : undefined;
 
   return (
     <MantineHeader height={HeaderHeight} className={cardClasses.card}>
@@ -39,7 +32,13 @@ export function Header(props: any) {
           <Search />
           <ToggleEditModeAction />
           <DockerMenuButton />
-          <Indicator size={15} color="blue" withBorder processing disabled={!newVersionAvailable}>
+          <Indicator
+            size={15}
+            color="blue"
+            withBorder
+            processing
+            disabled={newVersionAvailable === undefined}
+          >
             <SettingsMenu newVersionAvailable={newVersionAvailable} />
           </Indicator>
         </Group>

src/components/layout/header/Search.tsx

@@ -148,13 +148,14 @@ export function Search() {
   } = useQuery(
     ['overseerr', debounced],
     async () => {
-      if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && debounced.length > 3) {
-        const res = await axios.get(`/api/modules/overseerr?query=${debounced}`);
-        return res.data.results ?? [];
-      }
-      return [];
+      const res = await axios.get(`/api/modules/overseerr?query=${debounced}`);
+      return res.data.results ?? [];
     },
     {
+      enabled:
+        isOverseerrEnabled === true &&
+        selectedSearchEngine.value === 'overseerr' &&
+        debounced.length > 3,
       refetchOnWindowFocus: false,
       refetchOnMount: false,
       refetchInterval: false,