Merge pull request #673 from ajnart/useQuery-stale-time-cache

✨ Add cache and stale timers for most react query

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

@@ -16,17 +16,15 @@ export function Header(props: any) {
   const { classes: cardClasses } = useCardStyles(false);
   const { attributes } = usePackageAttributesStore();
 
-  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 > `v${attributes.packageVersion}`) {
-          setNewVersionAvailable(data.tag_name);
-        }
-      });
-    });
-  }, []);
+  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 > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
 
   return (
     <MantineHeader height="auto" className={cardClasses.card}>
@@ -38,7 +36,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,

src/tools/queryClient.ts

@@ -1,3 +1,10 @@
 import { QueryClient } from '@tanstack/react-query';
 
-export const queryClient = new QueryClient();
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 mins
+      cacheTime: 10 * 60 * 1000, // 10 mins
+    },
+  },
+});

src/widgets/calendar/CalendarTile.tsx

@@ -53,6 +53,7 @@ function CalendarTile({ widget }: CalendarTileProps) {
 
   const { data: medias } = useQuery({
     queryKey: ['calendar/medias', { month: month.getMonth(), year: month.getFullYear() }],
+    staleTime: 1000 * 60 * 60 * 5,
     queryFn: async () =>
       (await (
         await fetch(

src/widgets/weather/WeatherTile.tsx

@@ -76,7 +76,7 @@ function WeatherTile({ widget }: WeatherTileProps) {
       align="center"
       style={{ height: '100%', width: '100%' }}
     >
-      <Group align={'center'} position="center" spacing="xs">
+      <Group align="center" position="center" spacing="xs">
         <WeatherIcon code={weather!.current_weather.weathercode} />
         <Title>
           {getPerferedUnit(

src/widgets/weather/useWeatherForCity.ts

@@ -11,12 +11,18 @@ export const useWeatherForCity = (cityName: string) => {
     data: city,
     isLoading,
     isError,
-  } = useQuery({ queryKey: ['weatherCity', { cityName }], queryFn: () => fetchCity(cityName) });
+  } = useQuery({
+    queryKey: ['weatherCity', { cityName }],
+    queryFn: () => fetchCity(cityName),
+    cacheTime: 1000 * 60 * 60 * 24, // the city is cached for 24 hours
+    staleTime: Infinity, // the city is never considered stale
+  });
   const weatherQuery = useQuery({
     queryKey: ['weather', { cityName }],
     queryFn: () => fetchWeather(city?.results[0]),
     enabled: !!city,
-    refetchInterval: 1000 * 60 * 5, // requests the weather every 5 minutes
+    cacheTime: 1000 * 60 * 60 * 6, // the weather is cached for 6 hours
+    staleTime: 1000 * 60 * 5, // the weather is considered stale after 5 minutes
   });
 
   return {
@@ -41,13 +47,13 @@ const fetchCity = async (cityName: string) => {
  * @param coordinates of the location the weather should be fetched
  * @returns weather of specified coordinates
  */
-const fetchWeather = async (coordinates?: Coordinates) => {
-  if (!coordinates) return;
+async function fetchWeather(coordinates?: Coordinates) {
+  if (!coordinates) return null;
   const { longitude, latitude } = coordinates;
   const res = await fetch(
     `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&daily=weathercode,temperature_2m_max,temperature_2m_min&current_weather=true&timezone=Europe%2FLondon`
   );
   return (await res.json()) as WeatherResponse;
-};
+}
 
 type Coordinates = { latitude: number; longitude: number };