Upgrade react query

frontend/package.json

@@ -40,8 +40,8 @@
     "@raruto/leaflet-elevation": "1.7.0",
     "@react-hook/resize-observer": "^1.2.6",
     "@sentry/nextjs": "^7.12.1",
-    "@tanstack/react-query": "^4.10.3",
-    "@tanstack/react-query-devtools": "^4.11.0",
+    "@tanstack/react-query": "^5.51.1",
+    "@tanstack/react-query-devtools": "^5.51.1",
     "@zeit/next-source-maps": "^0.0.4-canary.1",
     "autoprefixer": "^10.4.14",
     "axios": "0.25.0",

frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts

@@ -10,9 +10,10 @@ const { activityBar } = getHomePageConfig();
 
 export const useActivitySearchFilter = () => {
   const language = useRouter().locale ?? getDefaultLanguage();
-  const { data: activities } = useQuery<ActivityFilter[], Error>(['homeActivities', language], () =>
-    getActivityBarContent(language, activityBar.links),
-  );
+  const { data: activities } = useQuery<ActivityFilter[], Error>({
+    queryKey: ['homeActivities', language],
+    queryFn: () => getActivityBarContent(language, activityBar.links),
+  });
 
   const [expandedState, setExpandedState] = useState<'EXPANDED' | 'COLLAPSED'>('COLLAPSED');
 

frontend/src/components/Footer/useFooter.ts

@@ -20,13 +20,11 @@ export const useFooter = (): { config: FooterConfigOutput; intl: IntlShape } =>
   const language = useRouter().locale ?? getDefaultLanguage();
   const containsInformationIDLinks = links.some(link => 'informationID' in link);
 
-  const { data = [] } = useQuery<MenuItem[], Error>(
-    ['footer', language],
-    () => getFlatPages(language),
-    {
-      enabled: containsInformationIDLinks,
-    },
-  );
+  const { data = [] } = useQuery<MenuItem[], Error>({
+    queryKey: ['footer', language],
+    queryFn: () => getFlatPages(language),
+    enabled: containsInformationIDLinks,
+  });
   let nextLinks;
   // If the footer config contains `informationID` keys,the app retrieves "flatpages" to get the corresponding label/url
   if (containsInformationIDLinks === true) {

frontend/src/components/Header/useHeader.ts

@@ -15,22 +15,24 @@ export const useHeader = (menuNode: MutableRefObject<HTMLDivElement | null | und
   const config = getHeaderConfig();
   const language = useRouter().locale ?? getDefaultLanguage();
 
-  const { data: currentAPIVersion } = useQuery(['APIVersion'], getAPIVersion);
+  const { data: currentAPIVersion } = useQuery({
+    queryKey: ['APIVersion'],
+    queryFn: getAPIVersion,
+  });
 
   const is2_104LowerOrEqualCurrentAPIVersion = isLowerOrEqualCurrentAPIVersion(
     '2.104.0',
     currentAPIVersion,
   );
 
   // Call MenuItems or flatpage as fallback for GTA API Version below 2.104
-  const { data: menuItems } = useQuery<MenuItem[], Error>(
-    ['header', language],
-    () => (is2_104LowerOrEqualCurrentAPIVersion ? geMenuItems(language) : getFlatPages(language)),
-    {
-      enabled: is2_104LowerOrEqualCurrentAPIVersion !== null,
-      staleTime: ONE_DAY,
-    },
-  );
+  const { data: menuItems } = useQuery<MenuItem[], Error>({
+    queryKey: ['header', language],
+    queryFn: () =>
+      is2_104LowerOrEqualCurrentAPIVersion ? geMenuItems(language) : getFlatPages(language),
+    enabled: is2_104LowerOrEqualCurrentAPIVersion !== null,
+    staleTime: ONE_DAY,
+  });
   const intl = useIntl();
 
   const { height = 0 } = useSize(menuNode) ?? {};

frontend/src/components/Map/hooks/usePopupResult.ts

@@ -28,11 +28,11 @@ export const usePopupResult = (id: string, shouldFetch: boolean, type: ContentTy
     throw new Error('Incorrect type');
   };
 
-  const { data: trekPopupResult, isLoading } = useQuery<PopupResult, Error>(
-    ['popupResult', id, language],
-    fetchData,
-    { enabled: type !== null && shouldFetch && commonDictionaries !== undefined },
-  );
+  const { data: trekPopupResult, isLoading } = useQuery<PopupResult, Error>({
+    queryKey: ['popupResult', type, id, language],
+    queryFn: fetchData,
+    enabled: type !== null && shouldFetch && commonDictionaries !== undefined,
+  });
 
   return {
     trekPopupResult,

frontend/src/components/Map/hooks/useTrekGeometry.ts

@@ -14,23 +14,18 @@ export const useObjectGeometry = (
 ) => {
   const language = useRouter().locale ?? getDefaultLanguage();
 
-  const func = () => {
-    if (type === 'TREK') {
-      return getTrekGeometryResult;
-    }
-    if (type === 'OUTDOOR_SITE') {
-      return getOutdoorSiteGeometryResult;
-    }
-    if (type === 'TOURISTIC_EVENT') {
-      return getTouristicEventGeometryResult;
-    }
-    return getTouristicContentGeometryResult;
+  const getterByType = {
+    TREK: getTrekGeometryResult,
+    OUTDOOR_SITE: getOutdoorSiteGeometryResult,
+    TOURISTIC_EVENT: getTouristicEventGeometryResult,
+    TOURISTIC_CONTENT: getTouristicContentGeometryResult,
   };
+  const getter = getterByType[type];
 
-  const { data: trekGeometry } = useQuery<GeometryObject, Error>(
-    ['trekPopupResult', id, language],
-    () => func()(String(id), language),
-  );
+  const { data: trekGeometry } = useQuery<GeometryObject, Error>({
+    queryKey: ['trekPopupResult', type, id, language],
+    queryFn: () => getter?.(String(id), language),
+  });
 
   return { trekGeometry };
 };

frontend/src/components/pages/details/useDetails.tsx

@@ -3,11 +3,8 @@ import { Details, TrekFamily } from 'modules/details/interface';
 import { getDetails, getTrekFamily } from 'modules/details/connector';
 import { isUrlString } from 'modules/utils/string';
 import { ONE_DAY } from 'services/constants/staleTime';
-import { isRessourceMissing } from 'services/routeUtils';
 import { useCallback, useEffect, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { useRouter } from 'next/router';
-import { routes } from 'services/routes';
 import { useMediaPredicate } from 'react-media-hook';
 import useSectionsReferences from 'hooks/useSectionsReferences';
 import { useQueryCommonDictionaries } from 'modules/dictionaries/api';
@@ -43,39 +40,29 @@ export const useDetails = (
 ) => {
   const id = isUrlString(slug) ? slug.split('-')[0] : '';
   const path = isUrlString(slug) ? decodeURI(slug) : '';
-  const router = useRouter();
 
   const commonDictionaries = useQueryCommonDictionaries(language);
 
   const {
     data: details,
     refetch,
     isLoading,
-  } = useQuery<Details, Error>(
-    ['details', id, language],
-    () => getDetails(id, language, commonDictionaries),
-    {
-      enabled: isUrlString(slug) && commonDictionaries !== undefined,
-      onError: error => {
-        if (isRessourceMissing(error)) {
-          void router.push(routes.HOME);
-        }
-      },
-      staleTime: ONE_DAY,
-    },
-  );
+  } = useQuery<Details, Error>({
+    queryKey: ['details', id, language],
+    queryFn: () => getDetails(id, language, commonDictionaries),
+    enabled: isUrlString(slug) && commonDictionaries !== undefined,
+    staleTime: ONE_DAY,
+  });
 
   const isMobile = useMediaPredicate('(max-width: 1024px)');
 
   const parentIdString = isUrlString(parentId) ? parentId : '';
-  const { data: trekFamily } = useQuery<TrekFamily | null, Error>(
-    ['trekFamily', parentIdString, language],
-    () => getTrekFamily(isUrlString(parentId) ? parentId : '', language),
-    {
-      enabled: isUrlString(parentId),
-      staleTime: ONE_DAY,
-    },
-  );
+  const { data: trekFamily } = useQuery<TrekFamily | null, Error>({
+    queryKey: ['trekFamily', parentIdString, language],
+    queryFn: () => getTrekFamily(parentIdString, language),
+    enabled: isUrlString(parentId),
+    staleTime: ONE_DAY,
+  });
 
   const { sections } = getDetailsConfig(language);
 

frontend/src/components/pages/flatPage/useFlatPage.tsx

@@ -22,25 +22,23 @@ export const useFlatPage = (flatPageUrl: string | undefined) => {
     refetch,
     isLoading,
     error,
-  } = useQuery<FlatPageDetails, Error>(
-    ['flatPageDetails', id, language],
-    () => getFlatPageDetails(id, language, commonDictionaries),
-    {
-      enabled: isUrlString(flatPageUrl) && commonDictionaries !== undefined,
-      staleTime: ONE_DAY,
-    },
-  );
+  } = useQuery<FlatPageDetails, Error>({
+    queryKey: ['flatPageDetails', id, language],
+    queryFn: () => getFlatPageDetails(id, language, commonDictionaries),
+    enabled: isUrlString(flatPageUrl) && commonDictionaries !== undefined,
+    staleTime: ONE_DAY,
+  });
   const suggestions = getSuggestionsFromContent(flatPage?.content ?? '');
 
   const activitySuggestionIds = suggestions.flatMap(suggestion =>
     'ids' in suggestion ? suggestion.ids : [suggestion.type],
   );
 
-  const { data: activitySuggestions = [] } = useQuery<ActivitySuggestion[] | [], Error>(
-    ['activitySuggestions', ...activitySuggestionIds, id, language],
-    () => getActivitySuggestions(suggestions, language, commonDictionaries),
-    { enabled: suggestions.length > 0 && commonDictionaries !== undefined },
-  );
+  const { data: activitySuggestions = [] } = useQuery<ActivitySuggestion[] | [], Error>({
+    queryKey: ['activitySuggestions', activitySuggestionIds, language],
+    queryFn: () => getActivitySuggestions(suggestions, language, commonDictionaries),
+    enabled: suggestions.length > 0 && commonDictionaries !== undefined,
+  });
 
   return {
     id,

frontend/src/components/pages/home/useHome.ts

@@ -22,11 +22,11 @@ export const useHome = (): UseHome => {
 
   const commonDictionaries = useQueryCommonDictionaries(language);
 
-  const { data = [] } = useQuery<ActivitySuggestion[] | [], Error>(
-    ['activitySuggestions', `Suggestion-${activitySuggestionIds.join('-')}`, language],
-    () => getActivitySuggestions(suggestions, language, commonDictionaries),
-    { enabled: suggestions.length > 0 && commonDictionaries !== undefined },
-  );
+  const { data = [] } = useQuery<ActivitySuggestion[] | [], Error>({
+    queryKey: ['activitySuggestions', activitySuggestionIds, language],
+    queryFn: () => getActivitySuggestions(suggestions, language, commonDictionaries),
+    enabled: suggestions.length > 0 && commonDictionaries !== undefined,
+  });
 
   return { config: homePageConfig, suggestions: data };
 };

frontend/src/components/pages/search/components/FilterBar/useFilterBar.tsx

@@ -21,10 +21,10 @@ import { FormattedMessage } from 'react-intl';
 export const useFilterBar = () => {
   const { groupTreksAndOutdoorFilters, enableOutdoor } = getGlobalConfig();
 
-  const { data: currentAPIVersion } = useQuery<APIVersion | undefined>(
-    ['APIVersion'],
-    getAPIVersion,
-  );
+  const { data: currentAPIVersion } = useQuery<APIVersion | undefined>({
+    queryKey: ['APIVersion'],
+    queryFn: getAPIVersion,
+  });
 
   const is2_108LowerOrEqualCurrentAPIVersion = isLowerOrEqualCurrentAPIVersion(
     '2.108.0',

frontend/src/components/pages/search/components/useFilters.ts

@@ -29,7 +29,10 @@ export const useFilter = () => {
       organizerEvent: FilterWithoutType | null;
     },
     Error
-  >(['initialFilterState', language], () => getInitialFilters(language, initialOptions));
+  >({
+    queryKey: ['initialFilterState', language],
+    queryFn: () => getInitialFilters(language, initialOptions),
+  });
 
   const initialFiltersState = data ? data.initialFiltersState : [];
   const touristicContentCategoryMapping = data ? data.touristicContentCategoryMapping : {};

frontend/src/components/pages/search/hooks/useCounter.ts

@@ -19,9 +19,9 @@ interface CountResult {
 const useCounter = ({ language }: Args): CountResult => {
   const commonDictionaries = useQueryCommonDictionaries(language);
 
-  const result = useQuery(
-    ['counter'],
-    ({
+  const result = useQuery({
+    queryKey: ['counter'],
+    queryFn: ({
       pageParam = {
         treks: 1,
         touristicContents: 1,
@@ -40,12 +40,10 @@ const useCounter = ({ language }: Args): CountResult => {
         language,
         commonDictionaries,
       ),
-    {
-      refetchOnReconnect: false,
-      refetchOnWindowFocus: false,
-      staleTime: ONE_DAY,
-    },
-  );
+    refetchOnReconnect: false,
+    refetchOnWindowFocus: false,
+    staleTime: ONE_DAY,
+  });
 
   return {
     treksCount: result?.data?.resultsNumberDetails?.treksCount ?? 0,

frontend/src/components/pages/search/hooks/useMapResults.ts

@@ -22,11 +22,17 @@ export const useMapResults = (
 
   const parsedFiltersState = parseFilters(filtersState);
 
-  const { data: mapResults, isLoading: isMapLoading } = useQuery<MapResults, Error>(
-    ['mapResults', parsedFiltersState, language, parseTextFilter(textFilterState), dateFilter],
-    () =>
+  const { data: mapResults, isLoading: isMapLoading } = useQuery<MapResults, Error>({
+    queryKey: [
+      'mapResults',
+      parsedFiltersState,
+      language,
+      parseTextFilter(textFilterState),
+      dateFilter,
+    ],
+    queryFn: () =>
       getMapResults({ filtersState: parsedFiltersState, textFilterState, dateFilter }, language),
-  );
+  });
 
   return {
     isMapLoading,