Merge pull request #106 from Vizzuality/fix/client/locations-cache

[N/A]: fixes location query cache
Vizzuality · Dec 6, 2023 · 1940964 · 1940964
2 parents bb6485a + be78e02
commit 1940964
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 29 deletions.
diff --git a/frontend/src/containers/map/content/map/index.tsx b/frontend/src/containers/map/content/map/index.tsx
@@ -5,7 +5,6 @@ import { useMap } from 'react-map-gl';
 import dynamic from 'next/dynamic';
 import { useParams } from 'next/navigation';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import Map, { ZoomControls, Attributions } from '@/components/map';
@@ -25,7 +24,7 @@ import {
   popupAtom,
 } from '@/containers/map/store';
 import { useGetLayers } from '@/types/generated/layer';
-import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
+import { useGetLocations } from '@/types/generated/location';
 import { LayerTyped } from '@/types/layers';
 
 const LayerManager = dynamic(() => import('@/containers/map/content/map/layer-manager'), {
@@ -41,12 +40,20 @@ const MainMap: React.FC = () => {
   const { locationCode } = useParams();
   const locationBbox = useAtomValue(bboxLocation);
   const hoveredPolygonId = useRef<Parameters<typeof map.setFeatureState>[0] | null>(null);
-  const queryClient = useQueryClient();
 
-  const locationsQuery = queryClient.getQueryState<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   const layersInteractive = useAtomValue(layersInteractiveAtom);
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);

diff --git a/frontend/src/containers/map/sidebar/widgets/index.tsx b/frontend/src/containers/map/sidebar/widgets/index.tsx
@@ -1,8 +1,6 @@
 import { useRouter } from 'next/router';
 
-import { useQueryClient } from '@tanstack/react-query';
-
-import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
+import { useGetLocations } from '@/types/generated/location';
 
 import EstablishmentStagesWidget from './establishment-stages';
 import HabitatWidget from './habitat';
@@ -14,19 +12,26 @@ const MapWidgets: React.FC = () => {
     query: { locationCode },
   } = useRouter();
 
-  const queryClient = useQueryClient();
-
-  const location = queryClient.getQueryData<LocationGroupsDataItemAttributes>([
-    'locations',
-    locationCode,
-  ]);
+  const locationsQuery = useGetLocations(
+    {
+      filters: {
+        code: locationCode,
+      },
+    },
+    {
+      query: {
+        queryKey: ['locations', locationCode],
+        select: ({ data }) => data?.[0]?.attributes,
+      },
+    }
+  );
 
   return (
     <div className="flex flex-col divide-y-[1px] divide-black font-mono">
-      <MarineConservationWidget location={location} />
-      <ProtectionTypesWidget location={location} />
-      <EstablishmentStagesWidget location={location} />
-      <HabitatWidget location={location} />
+      <MarineConservationWidget location={locationsQuery.data} />
+      <ProtectionTypesWidget location={locationsQuery.data} />
+      <EstablishmentStagesWidget location={locationsQuery.data} />
+      <HabitatWidget location={locationsQuery.data} />
     </div>
   );
 };

diff --git a/frontend/src/pages/map/[locationCode].tsx b/frontend/src/pages/map/[locationCode].tsx
@@ -5,7 +5,7 @@ import Content from '@/containers/map/content';
 import Sidebar from '@/containers/map/sidebar';
 import Layout from '@/layouts/map';
 import { getLocations } from '@/types/generated/location';
-import { Location, LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
+import { Location, LocationListResponseDataItem } from '@/types/generated/strapi.schemas';
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const { query } = context;
@@ -19,18 +19,15 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     },
   });
 
-  const location = locationsData?.[0];
+  if (!locationsData) return { notFound: true };
 
-  if (!location) return { notFound: true };
-
-  queryClient.setQueryData<LocationGroupsDataItemAttributes>(
-    ['locations', locationCode],
-    location.attributes
-  );
+  queryClient.setQueryData<{ data: LocationListResponseDataItem[] }>(['locations', locationCode], {
+    data: locationsData,
+  });
 
   return {
     props: {
-      location: location.attributes,
+      location: locationsData[0].attributes,
       dehydratedState: dehydrate(queryClient),
     },
   };