diff --git a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx b/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx index f74ab7d60..d8795d25f 100644 --- a/src/components/Dashboard/Modals/EditAppModal/Tabs/AppereanceTab/AppereanceTab.tsx +++ b/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'; diff --git a/src/components/Dashboard/Tiles/Apps/AppPing.tsx b/src/components/Dashboard/Tiles/Apps/AppPing.tsx index 3f2a8c925..d94cdc676 100644 --- a/src/components/Dashboard/Tiles/Apps/AppPing.tsx +++ b/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); diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index c70fa7128..4559c2d80 100644 --- a/src/components/layout/header/Header.tsx +++ b/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(''); - 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 ( @@ -39,7 +32,13 @@ export function Header(props: any) { - + diff --git a/src/components/layout/header/Search.tsx b/src/components/layout/header/Search.tsx index ba8d799d0..add4cb184 100644 --- a/src/components/layout/header/Search.tsx +++ b/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, diff --git a/src/tools/queryClient.ts b/src/tools/queryClient.ts index 6d46de591..b4d80818c 100644 --- a/src/tools/queryClient.ts +++ b/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 + }, + }, +}); diff --git a/src/widgets/calendar/CalendarTile.tsx b/src/widgets/calendar/CalendarTile.tsx index 7518a038b..6398dd3f7 100644 --- a/src/widgets/calendar/CalendarTile.tsx +++ b/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( diff --git a/src/widgets/weather/WeatherTile.tsx b/src/widgets/weather/WeatherTile.tsx index ad8efde4d..ba7b9eff7 100644 --- a/src/widgets/weather/WeatherTile.tsx +++ b/src/widgets/weather/WeatherTile.tsx @@ -76,7 +76,7 @@ function WeatherTile({ widget }: WeatherTileProps) { align="center" style={{ height: '100%', width: '100%' }} > - + {getPerferedUnit( diff --git a/src/widgets/weather/useWeatherForCity.ts b/src/widgets/weather/useWeatherForCity.ts index a785c92eb..62312f017 100644 --- a/src/widgets/weather/useWeatherForCity.ts +++ b/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¤t_weather=true&timezone=Europe%2FLondon` ); return (await res.json()) as WeatherResponse; -}; +} type Coordinates = { latitude: number; longitude: number };