diff --git a/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts b/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts index 7501210f2..35e6c471a 100644 --- a/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts +++ b/frontend/src/components/ActivitySearchFilter/useActivitySearchFilter.ts @@ -10,9 +10,11 @@ const { activityBar } = getHomePageConfig(); export const useActivitySearchFilter = () => { const language = useRouter().locale ?? getDefaultLanguage(); - const { data: activities } = useQuery(['homeActivities', language], () => - getActivityBarContent(language, activityBar.links), - ); + const { data: activities } = useQuery({ + queryKey: ['homeActivities', language], + + queryFn: () => getActivityBarContent(language, activityBar.links), + }); const [expandedState, setExpandedState] = useState<'EXPANDED' | 'COLLAPSED'>('COLLAPSED'); diff --git a/frontend/src/components/Footer/useFooter.ts b/frontend/src/components/Footer/useFooter.ts index 3c098620b..2b79064da 100644 --- a/frontend/src/components/Footer/useFooter.ts +++ b/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( - ['footer', language], - () => getFlatPages(language), - { - enabled: containsInformationIDLinks, - }, - ); + const { data = [] } = useQuery({ + 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) { diff --git a/frontend/src/components/Header/useHeader.ts b/frontend/src/components/Header/useHeader.ts index bc1be59d2..8c33f32c9 100644 --- a/frontend/src/components/Header/useHeader.ts +++ b/frontend/src/components/Header/useHeader.ts @@ -15,7 +15,10 @@ export const useHeader = (menuNode: MutableRefObject( - ['header', language], - () => (is2_104LowerOrEqualCurrentAPIVersion ? geMenuItems(language) : getFlatPages(language)), - { - enabled: is2_104LowerOrEqualCurrentAPIVersion !== null, - staleTime: ONE_DAY, - }, - ); + const { data: menuItems } = useQuery({ + 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) ?? {}; diff --git a/frontend/src/components/Map/hooks/usePopupResult.ts b/frontend/src/components/Map/hooks/usePopupResult.ts index 2b3d33d4b..1a30de616 100644 --- a/frontend/src/components/Map/hooks/usePopupResult.ts +++ b/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', id, language], - fetchData, - { enabled: type !== null && shouldFetch && commonDictionaries !== undefined }, - ); + const { data: trekPopupResult, isLoading } = useQuery({ + queryKey: ['popupResult', id, language], + queryFn: fetchData, + enabled: type !== null && shouldFetch && commonDictionaries !== undefined, + }); return { trekPopupResult, diff --git a/frontend/src/components/Map/hooks/useTrekGeometry.ts b/frontend/src/components/Map/hooks/useTrekGeometry.ts index f15aa97b1..004c9474f 100644 --- a/frontend/src/components/Map/hooks/useTrekGeometry.ts +++ b/frontend/src/components/Map/hooks/useTrekGeometry.ts @@ -27,10 +27,10 @@ export const useObjectGeometry = ( return getTouristicContentGeometryResult; }; - const { data: trekGeometry } = useQuery( - ['trekPopupResult', id, language], - () => func()(String(id), language), - ); + const { data: trekGeometry } = useQuery({ + queryKey: ['trekPopupResult', id, language], + queryFn: () => func()(String(id), language), + }); return { trekGeometry }; }; diff --git a/frontend/src/components/pages/details/useDetails.tsx b/frontend/src/components/pages/details/useDetails.tsx index 20e70b362..5cf24c213 100644 --- a/frontend/src/components/pages/details/useDetails.tsx +++ b/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,7 +40,6 @@ export const useDetails = ( ) => { const id = isUrlString(slug) ? slug.split('-')[0] : ''; const path = isUrlString(slug) ? decodeURI(slug) : ''; - const router = useRouter(); const commonDictionaries = useQueryCommonDictionaries(language); @@ -51,31 +47,22 @@ export const useDetails = ( data: details, refetch, isLoading, - } = useQuery( - ['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({ + 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', parentIdString, language], - () => getTrekFamily(isUrlString(parentId) ? parentId : '', language), - { - enabled: isUrlString(parentId), - staleTime: ONE_DAY, - }, - ); + const { data: trekFamily } = useQuery({ + queryKey: ['trekFamily', parentIdString, language], + queryFn: () => getTrekFamily(isUrlString(parentId) ? parentId : '', language), + enabled: isUrlString(parentId), + staleTime: ONE_DAY, + }); const { sections } = getDetailsConfig(language); diff --git a/frontend/src/components/pages/flatPage/useFlatPage.tsx b/frontend/src/components/pages/flatPage/useFlatPage.tsx index 2e674f22c..ae9117cd2 100644 --- a/frontend/src/components/pages/flatPage/useFlatPage.tsx +++ b/frontend/src/components/pages/flatPage/useFlatPage.tsx @@ -22,25 +22,23 @@ export const useFlatPage = (flatPageUrl: string | undefined) => { refetch, isLoading, error, - } = useQuery( - ['flatPageDetails', id, language], - () => getFlatPageDetails(id, language, commonDictionaries), - { - enabled: isUrlString(flatPageUrl) && commonDictionaries !== undefined, - staleTime: ONE_DAY, - }, - ); + } = useQuery({ + 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( - ['activitySuggestions', ...activitySuggestionIds, id, language], - () => getActivitySuggestions(suggestions, language, commonDictionaries), - { enabled: suggestions.length > 0 && commonDictionaries !== undefined }, - ); + const { data: activitySuggestions = [] } = useQuery({ + queryKey: ['activitySuggestions', ...activitySuggestionIds, id, language], + queryFn: () => getActivitySuggestions(suggestions, language, commonDictionaries), + enabled: suggestions.length > 0 && commonDictionaries !== undefined, + }); return { id, diff --git a/frontend/src/components/pages/home/useHome.ts b/frontend/src/components/pages/home/useHome.ts index 9f83e47c9..96247a421 100644 --- a/frontend/src/components/pages/home/useHome.ts +++ b/frontend/src/components/pages/home/useHome.ts @@ -22,11 +22,11 @@ export const useHome = (): UseHome => { const commonDictionaries = useQueryCommonDictionaries(language); - const { data = [] } = useQuery( - ['activitySuggestions', `Suggestion-${activitySuggestionIds.join('-')}`, language], - () => getActivitySuggestions(suggestions, language, commonDictionaries), - { enabled: suggestions.length > 0 && commonDictionaries !== undefined }, - ); + const { data = [] } = useQuery({ + queryKey: ['activitySuggestions', `Suggestion-${activitySuggestionIds.join('-')}`, language], + queryFn: () => getActivitySuggestions(suggestions, language, commonDictionaries), + enabled: suggestions.length > 0 && commonDictionaries !== undefined, + }); return { config: homePageConfig, suggestions: data }; }; diff --git a/frontend/src/components/pages/search/components/FilterBar/useFilterBar.tsx b/frontend/src/components/pages/search/components/FilterBar/useFilterBar.tsx index 8d84e705d..51a8ad8bd 100644 --- a/frontend/src/components/pages/search/components/FilterBar/useFilterBar.tsx +++ b/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'], - getAPIVersion, - ); + const { data: currentAPIVersion } = useQuery({ + queryKey: ['APIVersion'], + queryFn: getAPIVersion, + }); const is2_108LowerOrEqualCurrentAPIVersion = isLowerOrEqualCurrentAPIVersion( '2.108.0', diff --git a/frontend/src/components/pages/search/components/useFilters.ts b/frontend/src/components/pages/search/components/useFilters.ts index 9fa0bb11a..7bbce76cb 100644 --- a/frontend/src/components/pages/search/components/useFilters.ts +++ b/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 : {}; diff --git a/frontend/src/components/pages/search/hooks/useCounter.ts b/frontend/src/components/pages/search/hooks/useCounter.ts index 988c198e8..d7764da16 100644 --- a/frontend/src/components/pages/search/hooks/useCounter.ts +++ b/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, diff --git a/frontend/src/components/pages/search/hooks/useMapResults.ts b/frontend/src/components/pages/search/hooks/useMapResults.ts index f70923008..78cecf09d 100644 --- a/frontend/src/components/pages/search/hooks/useMapResults.ts +++ b/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', parsedFiltersState, language, parseTextFilter(textFilterState), dateFilter], - () => + const { data: mapResults, isLoading: isMapLoading } = useQuery({ + queryKey: [ + 'mapResults', + parsedFiltersState, + language, + parseTextFilter(textFilterState), + dateFilter, + ], + queryFn: () => getMapResults({ filtersState: parsedFiltersState, textFilterState, dateFilter }, language), - ); + }); return { isMapLoading, diff --git a/frontend/src/components/pages/search/hooks/useTrekResults.ts b/frontend/src/components/pages/search/hooks/useTrekResults.ts index 90709ae07..6d81b26dd 100644 --- a/frontend/src/components/pages/search/hooks/useTrekResults.ts +++ b/frontend/src/components/pages/search/hooks/useTrekResults.ts @@ -77,8 +77,8 @@ export const useTrekResults = ( hasNextPage, hasPreviousPage, isFetchingNextPage, - } = useInfiniteQuery( - [ + } = useInfiniteQuery({ + queryKey: [ 'trekResults', JSON.stringify(parsedFiltersState), language, @@ -87,7 +87,7 @@ export const useTrekResults = ( JSON.stringify(dateFilter), page, ], - ({ + queryFn: ({ pageParam = { treks: page, touristicContents: page, @@ -102,30 +102,29 @@ export const useTrekResults = ( commonDictionaries, ); }, - { - retry: false, - // We already have a fallback component to allow the user to refetch - // Leaving these on induced issues with our refetching only next page strategy - // When it refetched on reconnect/focus the infinite scroll then stopped working - refetchOnReconnect: false, - refetchOnWindowFocus: false, - // hasNextPage will be set to false if getNextPageParam returns undefined - getNextPageParam: lastPageResult => - lastPageResult.nextPages.treks !== null || - lastPageResult.nextPages.touristicContents !== null || - lastPageResult.nextPages.outdoorSites !== null || - lastPageResult.nextPages.touristicEvents !== null - ? lastPageResult.nextPages - : undefined, - getPreviousPageParam: lastPageResult => - lastPageResult.previousPages.treks !== null || - lastPageResult.previousPages.touristicContents !== null || - lastPageResult.previousPages.outdoorSites !== null || - lastPageResult.previousPages.touristicEvents !== null - ? lastPageResult.previousPages - : undefined, - }, - ); + initialPageParam: page, + retry: false, + // We already have a fallback component to allow the user to refetch + // Leaving these on induced issues with our refetching only next page strategy + // When it refetched on reconnect/focus the infinite scroll then stopped working + refetchOnReconnect: false, + refetchOnWindowFocus: false, + // hasNextPage will be set to false if getNextPageParam returns undefined + getNextPageParam: lastPageResult => + lastPageResult.nextPages.treks !== null || + lastPageResult.nextPages.touristicContents !== null || + lastPageResult.nextPages.outdoorSites !== null || + lastPageResult.nextPages.touristicEvents !== null + ? lastPageResult.nextPages + : undefined, + getPreviousPageParam: lastPageResult => + lastPageResult.previousPages.treks !== null || + lastPageResult.previousPages.touristicContents !== null || + lastPageResult.previousPages.outdoorSites !== null || + lastPageResult.previousPages.touristicEvents !== null + ? lastPageResult.previousPages + : undefined, + }); useEffect(() => { const url = computeUrl(filtersState, textFilterState, dateFilter); diff --git a/frontend/src/components/pages/site/useOutdoorCourse.tsx b/frontend/src/components/pages/site/useOutdoorCourse.tsx index 4afbb87da..2d0325e2d 100644 --- a/frontend/src/components/pages/site/useOutdoorCourse.tsx +++ b/frontend/src/components/pages/site/useOutdoorCourse.tsx @@ -2,9 +2,6 @@ import useSectionsReferences from 'hooks/useSectionsReferences'; import { isUrlString } from 'modules/utils/string'; import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; -import { useRouter } from 'next/router'; -import { isRessourceMissing } from 'services/routeUtils'; -import { routes } from 'services/routes'; import { ONE_DAY } from 'services/constants/staleTime'; import { useQueryCommonDictionaries } from 'modules/dictionaries/api'; import { DetailsSections } from '../details/useDetails'; @@ -19,23 +16,14 @@ export const useOutdoorCourse = ( const id = isUrlString(outdoorCourseUrl) ? outdoorCourseUrl.split('-')[0] : ''; const path = isUrlString(outdoorCourseUrl) ? decodeURI(outdoorCourseUrl) : ''; - const router = useRouter(); - const commonDictionaries = useQueryCommonDictionaries(language); - const { data, refetch, isLoading } = useQuery( - ['outdoorCourseDetails', id, language], - () => getOutdoorCourseDetails(id, language, commonDictionaries), - { - enabled: isUrlString(outdoorCourseUrl) && commonDictionaries !== undefined, - onError: error => { - if (isRessourceMissing(error)) { - void router.push(routes.HOME); - } - }, - staleTime: ONE_DAY, - }, - ); + const { data, refetch, isLoading } = useQuery({ + queryKey: ['outdoorCourseDetails', id, language], + queryFn: () => getOutdoorCourseDetails(id, language, commonDictionaries), + enabled: isUrlString(outdoorCourseUrl) && commonDictionaries !== undefined, + staleTime: ONE_DAY, + }); const { sections } = getDetailsConfig(language); diff --git a/frontend/src/components/pages/site/useOutdoorSite.tsx b/frontend/src/components/pages/site/useOutdoorSite.tsx index 2271cdf4f..a7a8c001e 100644 --- a/frontend/src/components/pages/site/useOutdoorSite.tsx +++ b/frontend/src/components/pages/site/useOutdoorSite.tsx @@ -3,9 +3,6 @@ import { isUrlString } from 'modules/utils/string'; import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; import { ONE_DAY } from 'services/constants/staleTime'; -import { isRessourceMissing } from 'services/routeUtils'; -import { useRouter } from 'next/router'; -import { routes } from 'services/routes'; import { useQueryCommonDictionaries } from 'modules/dictionaries/api'; import { getOutdoorSiteDetails } from '../../../modules/outdoorSite/connector'; import { OutdoorSiteDetails } from '../../../modules/outdoorSite/interface'; @@ -15,23 +12,15 @@ import { DetailsSections } from '../details/useDetails'; export const useOutdoorSite = (outdoorSiteUrl: string | string[] | undefined, language: string) => { const id = isUrlString(outdoorSiteUrl) ? outdoorSiteUrl.split('-')[0] : ''; const path = isUrlString(outdoorSiteUrl) ? decodeURI(outdoorSiteUrl) : ''; - const router = useRouter(); const commonDictionaries = useQueryCommonDictionaries(language); - const { data, refetch, isLoading } = useQuery( - ['outdoorSiteDetails', id, language], - () => getOutdoorSiteDetails(id, language, commonDictionaries), - { - enabled: isUrlString(outdoorSiteUrl) && commonDictionaries !== undefined, - onError: error => { - if (isRessourceMissing(error)) { - void router.push(routes.HOME); - } - }, - staleTime: ONE_DAY, - }, - ); + const { data, refetch, isLoading } = useQuery({ + queryKey: ['outdoorSiteDetails', id, language], + queryFn: () => getOutdoorSiteDetails(id, language, commonDictionaries), + enabled: isUrlString(outdoorSiteUrl) && commonDictionaries !== undefined, + staleTime: ONE_DAY, + }); const { sections } = getDetailsConfig(language); diff --git a/frontend/src/components/pages/touristicContent/useTouristicContent.tsx b/frontend/src/components/pages/touristicContent/useTouristicContent.tsx index e4d44014a..0579ddc1e 100644 --- a/frontend/src/components/pages/touristicContent/useTouristicContent.tsx +++ b/frontend/src/components/pages/touristicContent/useTouristicContent.tsx @@ -3,10 +3,7 @@ import { TouristicContentDetails } from 'modules/touristicContent/interface'; import { isUrlString } from 'modules/utils/string'; import { useState } from 'react'; import { useQuery } from '@tanstack/react-query'; -import { isRessourceMissing } from 'services/routeUtils'; -import { useRouter } from 'next/router'; import { ONE_DAY } from 'services/constants/staleTime'; -import { routes } from 'services/routes'; import useSectionsReferences from 'hooks/useSectionsReferences'; import { useQueryCommonDictionaries } from 'modules/dictionaries/api'; import { DetailsSections } from '../details/useDetails'; @@ -20,23 +17,15 @@ export const useTouristicContent = ( const id = isTouristicContentUrlString ? touristicContentUrl.split('-')[0] : ''; const path = isTouristicContentUrlString ? decodeURI(touristicContentUrl) : ''; - const router = useRouter(); const commonDictionaries = useQueryCommonDictionaries(language); - const { data, refetch, isLoading } = useQuery( - ['touristicContentDetails', id, language], - () => getTouristicContentDetails(id, language, commonDictionaries), - { - enabled: isTouristicContentUrlString && commonDictionaries !== undefined, - onError: error => { - if (isRessourceMissing(error)) { - void router.push(routes.HOME); - } - }, - staleTime: ONE_DAY, - }, - ); + const { data, refetch, isLoading } = useQuery({ + queryKey: ['touristicContentDetails', id, language], + queryFn: () => getTouristicContentDetails(id, language, commonDictionaries), + enabled: isTouristicContentUrlString && commonDictionaries !== undefined, + staleTime: ONE_DAY, + }); const { sections } = getDetailsConfig(language); const sectionsTouristicContent = sections.touristicEvent.filter( diff --git a/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx b/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx index d9e84823b..070ce2baf 100644 --- a/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx +++ b/frontend/src/components/pages/touristicEvent/useTouristicEvent.tsx @@ -1,10 +1,7 @@ import { useState } from 'react'; import { isUrlString } from 'modules/utils/string'; import { useQuery } from '@tanstack/react-query'; -import { isRessourceMissing } from 'services/routeUtils'; -import { useRouter } from 'next/router'; import { ONE_DAY } from 'services/constants/staleTime'; -import { routes } from 'services/routes'; import useSectionsReferences from 'hooks/useSectionsReferences'; import { useQueryCommonDictionaries } from 'modules/dictionaries/api'; import { getTouristicEventDetails } from '../../../modules/touristicEvent/connector'; @@ -18,23 +15,15 @@ export const useTouristicEvent = ( ) => { const id = isUrlString(touristicEventUrl) ? touristicEventUrl.split('-')[0] : ''; const path = isUrlString(touristicEventUrl) ? decodeURI(touristicEventUrl) : ''; - const router = useRouter(); const commonDictionaries = useQueryCommonDictionaries(language); - const { data, refetch, isLoading } = useQuery( - ['outdoorCourseDetails', id, language], - () => getTouristicEventDetails(id, language, commonDictionaries), - { - enabled: isUrlString(touristicEventUrl) && commonDictionaries !== undefined, - onError: error => { - if (isRessourceMissing(error)) { - void router.push(routes.HOME); - } - }, - staleTime: ONE_DAY, - }, - ); + const { data, refetch, isLoading } = useQuery({ + queryKey: ['outdoorCourseDetails', id, language], + queryFn: () => getTouristicEventDetails(id, language, commonDictionaries), + enabled: isUrlString(touristicEventUrl) && commonDictionaries !== undefined, + staleTime: ONE_DAY, + }); const { sections } = getDetailsConfig(language); const sectionsTouristicEvent = sections.touristicEvent.filter(({ display }) => display === true); diff --git a/frontend/src/modules/dictionaries/api.ts b/frontend/src/modules/dictionaries/api.ts index 8f1bf9f15..d75109086 100644 --- a/frontend/src/modules/dictionaries/api.ts +++ b/frontend/src/modules/dictionaries/api.ts @@ -4,12 +4,10 @@ import { CommonDictionaries } from './interface'; import { getCommonDictionaries } from './connector'; export const useQueryCommonDictionaries = (language: string) => { - const { data } = useQuery( - ['commonDictionaries', language], - () => getCommonDictionaries(language), - { - staleTime: ONE_DAY / 2, - }, - ); + const { data } = useQuery({ + queryKey: ['commonDictionaries', language], + queryFn: () => getCommonDictionaries(language), + staleTime: ONE_DAY / 2, + }); return data; }; diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx index b1a9f6082..b81de304b 100644 --- a/frontend/src/pages/_app.tsx +++ b/frontend/src/pages/_app.tsx @@ -1,7 +1,7 @@ import { AppProps } from 'next/app'; import { Root } from 'components/pages/_app/Root'; -import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ONE_MINUTE } from 'services/constants/staleTime'; import '../styles/global.css'; @@ -32,7 +32,7 @@ const MyApp: React.FC = ({ Component, pageProps }) => { return ( - + @@ -41,7 +41,7 @@ const MyApp: React.FC = ({ Component, pageProps }) => { - + ); }; diff --git a/frontend/src/pages/event/[touristicEvent].tsx b/frontend/src/pages/event/[touristicEvent].tsx index 520a82348..464afc94e 100644 --- a/frontend/src/pages/event/[touristicEvent].tsx +++ b/frontend/src/pages/event/[touristicEvent].tsx @@ -1,11 +1,12 @@ import { TouristicEventUI } from 'components/pages/touristicEvent/TouristicEventUI'; import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { getDefaultLanguage } from 'modules/header/utills'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { routes } from 'services/routes'; import { redirectIfWrongUrl } from 'modules/utils/url'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; +import { isRessourceMissing } from 'services/routeUtils'; import { getTouristicEventDetails } from '../../modules/touristicEvent/connector'; import { isUrlString } from '../../modules/utils/string'; import Custom404 from '../404'; @@ -16,13 +17,27 @@ export const getServerSideProps: GetServerSideProps = async context => { : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); try { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getTouristicEventDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['touristicEventDetails', id, locale], () => details); + await queryClient.prefetchQuery({ + queryKey: ['touristicEventDetails', id, locale], + queryFn: () => details, + }); const redirect = redirectIfWrongUrl( id, @@ -54,9 +69,9 @@ interface Props { } const TouristicEvent: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { touristicEvent } = router.query; - const language = router.locale ?? getDefaultLanguage(); + const { query, locale } = useRouter(); + const { touristicEvent } = query; + const language = locale ?? getDefaultLanguage(); if (errorCode === 404) return ; diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx index 07614ef64..7e1ec35d4 100644 --- a/frontend/src/pages/index.tsx +++ b/frontend/src/pages/index.tsx @@ -16,22 +16,26 @@ export const getServerSideProps: GetServerSideProps = async context => { if (suggestions !== null) { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const activitySuggestionIds = suggestions.flatMap(suggestion => 'ids' in suggestion ? suggestion.ids : [suggestion.type], ); - await queryClient.prefetchQuery( - ['activitySuggestions', `Suggestion-${activitySuggestionIds.join('-')}`, locale], - () => getActivitySuggestions(suggestions, locale, commonDictionaries), - ); + await queryClient.prefetchQuery({ + queryKey: ['activitySuggestions', `Suggestion-${activitySuggestionIds.join('-')}`, locale], + queryFn: () => getActivitySuggestions(suggestions, locale, commonDictionaries), + }); } if (homePageConfig.activityBar.shouldDisplay === true) { - await queryClient.prefetchQuery(['homeActivities', locale], () => - getActivityBarContent(locale, homePageConfig.activityBar.links), - ); + await queryClient.prefetchQuery({ + queryKey: ['homeActivities', locale], + queryFn: () => getActivityBarContent(locale, homePageConfig.activityBar.links), + }); } return { diff --git a/frontend/src/pages/information/[flatPage].tsx b/frontend/src/pages/information/[flatPage].tsx index 047151d27..1dceb9ed7 100644 --- a/frontend/src/pages/information/[flatPage].tsx +++ b/frontend/src/pages/information/[flatPage].tsx @@ -1,7 +1,7 @@ import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { FlatPageUI } from 'components/pages/flatPage'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { routes } from 'services/routes'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; import { getActivitySuggestions } from 'modules/activitySuggestions/connector'; @@ -9,6 +9,7 @@ import { getFlatPageDetails } from 'modules/flatpage/connector'; import { getSuggestionsFromContent } from 'modules/flatpage/utils'; import { isUrlString } from 'modules/utils/string'; import { redirectIfWrongUrl } from 'modules/utils/url'; +import { isRessourceMissing } from 'services/routeUtils'; import Custom404 from '../404'; export const getServerSideProps: GetServerSideProps = async context => { @@ -16,13 +17,27 @@ export const getServerSideProps: GetServerSideProps = async context => { const id = isUrlString(context.query.flatPage) ? context.query.flatPage.split('-')[0] : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getFlatPageDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['flatPageDetails', id, locale], () => details); + await queryClient.prefetchQuery({ + queryKey: ['flatPageDetails', id, locale], + queryFn: () => details, + }); const suggestions = getSuggestionsFromContent(details.content); @@ -30,10 +45,10 @@ export const getServerSideProps: GetServerSideProps = async context => { 'ids' in suggestion ? suggestion.ids : [suggestion.type], ); - await queryClient.prefetchQuery( - ['activitySuggestions', ...activitySuggestionIds, id, locale], - () => getActivitySuggestions(suggestions, locale, commonDictionaries), - ); + await queryClient.prefetchQuery({ + queryKey: ['activitySuggestions', ...activitySuggestionIds, id, locale], + queryFn: () => getActivitySuggestions(suggestions, locale, commonDictionaries), + }); const redirect = redirectIfWrongUrl( id, @@ -65,8 +80,8 @@ interface Props { } const TouristicContent: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { flatPage } = router.query; + const { query } = useRouter(); + const { flatPage } = query; if (errorCode === 404 || flatPage === undefined) return ; diff --git a/frontend/src/pages/outdoor-course/[outdoorCourse].tsx b/frontend/src/pages/outdoor-course/[outdoorCourse].tsx index 0c4614c8a..0abbf923f 100644 --- a/frontend/src/pages/outdoor-course/[outdoorCourse].tsx +++ b/frontend/src/pages/outdoor-course/[outdoorCourse].tsx @@ -1,11 +1,12 @@ import { OutdoorCourseUI } from 'components/pages/site/OutdoorCourseUI'; import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { getDefaultLanguage } from 'modules/header/utills'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { routes } from 'services/routes'; import { redirectIfWrongUrl } from 'modules/utils/url'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; +import { isRessourceMissing } from 'services/routeUtils'; import { getOutdoorCourseDetails } from '../../modules/outdoorCourse/connector'; import { isUrlString } from '../../modules/utils/string'; import Custom404 from '../404'; @@ -16,14 +17,28 @@ export const getServerSideProps: GetServerSideProps = async context => { : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); try { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getOutdoorCourseDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['outdoorCourseDetails', id, locale], () => details); + await queryClient.prefetchQuery({ + queryKey: ['outdoorCourseDetails', id, locale], + queryFn: () => details, + }); const redirect = redirectIfWrongUrl( id, @@ -55,9 +70,9 @@ interface Props { } const OutdoorCourse: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { outdoorCourse } = router.query; - const language = router.locale ?? getDefaultLanguage(); + const { query, locale } = useRouter(); + const { outdoorCourse } = query; + const language = locale ?? getDefaultLanguage(); if (errorCode === 404) return ; diff --git a/frontend/src/pages/outdoor-site/[outdoorSite].tsx b/frontend/src/pages/outdoor-site/[outdoorSite].tsx index 59f2abade..232f13a9b 100644 --- a/frontend/src/pages/outdoor-site/[outdoorSite].tsx +++ b/frontend/src/pages/outdoor-site/[outdoorSite].tsx @@ -1,10 +1,11 @@ import { OutdoorSiteUI } from 'components/pages/site'; import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { getDefaultLanguage } from 'modules/header/utills'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { routes } from 'services/routes'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; +import { isRessourceMissing } from 'services/routeUtils'; import { getOutdoorSiteDetails } from '../../modules/outdoorSite/connector'; import { isUrlString } from '../../modules/utils/string'; import { redirectIfWrongUrl } from '../../modules/utils/url'; @@ -14,14 +15,28 @@ export const getServerSideProps: GetServerSideProps = async context => { const id = isUrlString(context.query.outdoorSite) ? context.query.outdoorSite.split('-')[0] : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); try { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getOutdoorSiteDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['outdoorSiteDetails', id, locale], () => details); + await queryClient.prefetchQuery({ + queryKey: ['outdoorSiteDetails', id, locale], + queryFn: () => details, + }); const redirect = redirectIfWrongUrl( id, @@ -53,9 +68,9 @@ interface Props { } const OutdoorSite: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { outdoorSite } = router.query; - const language = router.locale ?? getDefaultLanguage(); + const { query, locale } = useRouter(); + const { outdoorSite } = query; + const language = locale ?? getDefaultLanguage(); if (errorCode === 404) return ; diff --git a/frontend/src/pages/search.tsx b/frontend/src/pages/search.tsx index 43591f77f..e301cab21 100644 --- a/frontend/src/pages/search.tsx +++ b/frontend/src/pages/search.tsx @@ -1,12 +1,15 @@ +import { GetServerSideProps, NextPage } from 'next'; +import { dehydrate, DehydratedState, QueryCache, QueryClient } from '@tanstack/react-query'; +import router from 'next/router'; import { SearchUI } from 'components/pages/search'; import { parseFilters } from 'components/pages/search/utils'; import { getInitialFilters } from 'modules/filters/connector'; import { getDefaultLanguage } from 'modules/header/utills'; import { getSearchResults } from 'modules/results/connector'; -import { GetServerSideProps, NextPage } from 'next'; -import { dehydrate, DehydratedState, QueryClient } from '@tanstack/react-query'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; -import { getGlobalConfig } from '../modules/utils/api.config'; +import { getGlobalConfig } from 'modules/utils/api.config'; +import { isRessourceMissing } from 'services/routeUtils'; +import { routes } from 'services/routes'; import Custom404 from './404'; const sanitizeState = (unsafeState: DehydratedState): DehydratedState => @@ -14,16 +17,25 @@ const sanitizeState = (unsafeState: DehydratedState): DehydratedState => export const getServerSideProps: GetServerSideProps = async context => { const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); const { initialFiltersStateWithSelectedOptions } = await getInitialFilters(locale, context.query); const parsedInitialFiltersState = parseFilters(initialFiltersStateWithSelectedOptions); const initialTextFilter = context.query.text?.toString() ?? ''; const page = Number(context.query.page ?? 1); try { - await queryClient.prefetchQuery(['initialFilterState', locale], () => - getInitialFilters(locale, context.query), - ); + await queryClient.prefetchQuery({ + queryKey: ['initialFilterState', locale], + queryFn: () => getInitialFilters(locale, context.query), + }); const bboxFilter = undefined; const dateFilter = { @@ -32,29 +44,34 @@ export const getServerSideProps: GetServerSideProps = async context => { }; const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); - await queryClient.prefetchQuery(['counter'], () => - getSearchResults( - { - filtersState: [], - textFilterState: null, - bboxState: null, - dateFilter: { endDate: '', beginDate: '' }, - }, - { - treks: 1, - touristicContents: 1, - outdoorSites: getGlobalConfig().enableOutdoor ? 1 : null, - touristicEvents: getGlobalConfig().enableTouristicEvents ? 1 : null, - }, - locale, - commonDictionaries, - ), - ); + await queryClient.prefetchQuery({ + queryKey: ['counter'], + queryFn: () => + getSearchResults( + { + filtersState: [], + textFilterState: null, + bboxState: null, + dateFilter: { endDate: '', beginDate: '' }, + }, + { + treks: 1, + touristicContents: 1, + outdoorSites: getGlobalConfig().enableOutdoor ? 1 : null, + touristicEvents: getGlobalConfig().enableTouristicEvents ? 1 : null, + }, + locale, + commonDictionaries, + ), + }); - await queryClient.prefetchInfiniteQuery( - [ + await queryClient.prefetchInfiniteQuery({ + queryKey: [ 'trekResults', JSON.stringify(parsedInitialFiltersState), context.locale, @@ -63,7 +80,7 @@ export const getServerSideProps: GetServerSideProps = async context => { JSON.stringify(dateFilter), page, ], - () => + queryFn: () => getSearchResults( { filtersState: parsedInitialFiltersState, @@ -80,7 +97,8 @@ export const getServerSideProps: GetServerSideProps = async context => { locale, commonDictionaries, ), - ); + initialPageParam: page, + }); } catch (error) { return { props: { diff --git a/frontend/src/pages/service/[touristicContent].tsx b/frontend/src/pages/service/[touristicContent].tsx index 8a218ed64..6563968eb 100644 --- a/frontend/src/pages/service/[touristicContent].tsx +++ b/frontend/src/pages/service/[touristicContent].tsx @@ -1,10 +1,11 @@ import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { TouristicContentUI } from 'components/pages/touristicContent'; import { getDefaultLanguage } from 'modules/header/utills'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { routes } from 'services/routes'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; +import { isRessourceMissing } from 'services/routeUtils'; import { getTouristicContentDetails } from '../../modules/touristicContent/connector'; import { isUrlString } from '../../modules/utils/string'; import { redirectIfWrongUrl } from '../../modules/utils/url'; @@ -16,14 +17,28 @@ export const getServerSideProps: GetServerSideProps = async context => { : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); try { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getTouristicContentDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['touristicContentDetails', id, locale], () => details); + await queryClient.prefetchQuery({ + queryKey: ['touristicContentDetails', id, locale], + queryFn: () => details, + }); const redirect = redirectIfWrongUrl( id, @@ -55,9 +70,9 @@ interface Props { } const TouristicContent: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { touristicContent } = router.query; - const language = router.locale ?? getDefaultLanguage(); + const { query, locale } = useRouter(); + const { touristicContent } = query; + const language = locale ?? getDefaultLanguage(); if (errorCode === 404) return ; diff --git a/frontend/src/pages/trek/[slug].tsx b/frontend/src/pages/trek/[slug].tsx index 225df19a8..8dbf58eb0 100644 --- a/frontend/src/pages/trek/[slug].tsx +++ b/frontend/src/pages/trek/[slug].tsx @@ -1,13 +1,14 @@ import { GetServerSideProps, NextPage } from 'next'; -import { useRouter } from 'next/router'; +import router, { useRouter } from 'next/router'; import { DetailsUI } from 'components/pages/details'; import { useEffect } from 'react'; -import { dehydrate, QueryClient } from '@tanstack/react-query'; +import { dehydrate, QueryCache, QueryClient } from '@tanstack/react-query'; import { getDetails, getTrekFamily } from 'modules/details/connector'; import { isUrlString } from 'modules/utils/string'; import { getDefaultLanguage } from 'modules/header/utills'; import { routes } from 'services/routes'; import { getCommonDictionaries } from 'modules/dictionaries/connector'; +import { isRessourceMissing } from 'services/routeUtils'; import { redirectIfWrongUrl } from '../../modules/utils/url'; import Custom404 from '../404'; @@ -16,18 +17,30 @@ export const getServerSideProps: GetServerSideProps = async context => { const parentIdString = isUrlString(context.query.parentId) ? context.query.parentId : ''; const { locale = 'fr' } = context; - const queryClient = new QueryClient(); + const queryClient = new QueryClient({ + queryCache: new QueryCache({ + onError: error => { + if (isRessourceMissing(error)) { + void router.push(routes.HOME); + } + }, + }), + }); try { const commonDictionaries = await getCommonDictionaries(locale); - await queryClient.prefetchQuery(['commonDictionaries', locale], () => commonDictionaries); + await queryClient.prefetchQuery({ + queryKey: ['commonDictionaries', locale], + queryFn: () => commonDictionaries, + }); const details = await getDetails(id, locale, commonDictionaries); - await queryClient.prefetchQuery(['details', id, locale], () => details); - await queryClient.prefetchQuery(['trekFamily', parentIdString, locale], () => - getTrekFamily(parentIdString, locale), - ); + await queryClient.prefetchQuery({ queryKey: ['details', id, locale], queryFn: () => details }); + await queryClient.prefetchQuery({ + queryKey: ['trekFamily', parentIdString, locale], + queryFn: () => getTrekFamily(parentIdString, locale), + }); const redirect = redirectIfWrongUrl( id, @@ -60,9 +73,9 @@ interface Props { } const Trek: NextPage = ({ errorCode }) => { - const router = useRouter(); - const { slug, parentId } = router.query; - const language = router.locale ?? getDefaultLanguage(); + const { query, locale } = useRouter(); + const { slug, parentId } = query; + const language = locale ?? getDefaultLanguage(); useEffect(() => { // Force to scroll top on page refresh