Migrate to react query v5

Author: Anders Rognstad

package-lock.json

@@ -26,8 +26,8 @@
     "@navikt/ds-react": "5.11.1",
     "@navikt/fnrvalidator": "1.1.4",
     "@navikt/navspa": "3.0.1",
-    "@tanstack/react-query": "4.22.0",
-    "@tanstack/react-query-devtools": "4.22.0",
+    "@tanstack/react-query": "5.8.6",
+    "@tanstack/react-query-devtools": "5.8.6",
     "@types/connect-redis": "0.0.19",
     "@types/express": "4.17.15",
     "@types/express-http-proxy": "1.6.3",

package.json

@@ -31,10 +31,7 @@ const OversiktContainer = ({ tabType }: Props): ReactElement => {
   }, [setTabType, tabType]);
 
   const ContainerContent = (): ReactElement => {
-    if (
-      personoversiktQuery.isInitialLoading ||
-      personregisterQuery.isInitialLoading
-    ) {
+    if (personoversiktQuery.isLoading || personregisterQuery.isLoading) {
       return <AppSpinner />;
     }
 

src/containers/OversiktContainer.tsx

@@ -10,7 +10,7 @@ import { FetchPersonoversiktFailed } from '@/context/notification/Notifications'
 import { ApiErrorException } from '@/api/errors';
 import { useAsyncError } from '@/data/useAsyncError';
 import { minutesToMillis } from '@/utils/timeUtils';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { PERSONOVERSIKT_ROOT } from '@/apiConstants';
 
 const isUbehandlet = (ubehandletStatus: PersonOversiktUbehandletStatusDTO) => {
@@ -59,22 +59,28 @@ export const usePersonoversiktQuery = () => {
     return personoversiktData || [];
   };
 
-  const query = useQuery({
+  const query = useQuery<PersonOversiktStatusDTO[], ApiErrorException>({
     queryKey: personoversiktQueryKeys.personoversiktEnhet(aktivEnhet),
     queryFn: fetchPersonoversikt,
     enabled: !!aktivEnhet,
     staleTime: minutesToMillis(5),
-    onError: (error) => {
-      if (error instanceof ApiErrorException && error.code === 403) {
-        throwError(error);
+  });
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      clearNotification('fetchPersonoversiktFailed');
+    }
+  }, [query.isSuccess, clearNotification]);
+
+  useEffect(() => {
+    if (query.isError) {
+      if (query.error.code === 403) {
+        throwError(query.error);
       } else {
         displayNotification(FetchPersonoversiktFailed);
       }
-    },
-    onSuccess: () => {
-      clearNotification('fetchPersonoversiktFailed');
-    },
-  });
+    }
+  }, [throwError, query.isError, query.error, displayNotification]);
 
   return {
     ...query,

src/data/personoversiktHooks.ts

@@ -7,6 +7,7 @@ import { ApiErrorException } from '@/api/errors';
 import { FetchPersonregisterFailed } from '@/context/notification/Notifications';
 import { useNotifications } from '@/context/notification/NotificationContext';
 import { useAsyncError } from '@/data/useAsyncError';
+import { useEffect } from 'react';
 
 export const personregisterQueryKeys = {
   personregister: ['personregister'],
@@ -34,19 +35,27 @@ export const usePersonregisterQuery = () => {
     return personregisterData || [];
   };
 
-  return useQuery({
+  const query = useQuery<PersonregisterData[], ApiErrorException>({
     queryKey: personregisterQueryKeys.personregister,
     queryFn: fetchPersonregister,
     enabled: fnrForPersonerUtenNavnListe.length > 0,
-    onError: (error) => {
-      if (error instanceof ApiErrorException && error.code === 403) {
-        throwError(error);
+  });
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      clearNotification('fetchPersonregisterFailed');
+    }
+  }, [query.isSuccess, clearNotification]);
+
+  useEffect(() => {
+    if (query.isError) {
+      if (query.error.code === 403) {
+        throwError(query.error);
       } else {
         displayNotification(FetchPersonregisterFailed);
       }
-    },
-    onSuccess: () => {
-      clearNotification('fetchPersonregisterFailed');
-    },
-  });
+    }
+  }, [throwError, query.isError, query.error, displayNotification]);
+
+  return query;
 };

src/data/personregisterHooks.ts

@@ -15,6 +15,7 @@ import {
 } from '@/context/notification/Notifications';
 import { useAsyncError } from '@/data/useAsyncError';
 import { ApiErrorException } from '@/api/errors';
+import { useEffect } from 'react';
 
 export const veiledereQueryKeys = {
   veiledereInfo: ['veiledereInfo'],
@@ -33,21 +34,29 @@ export const useVeiledereQuery = () => {
   const fetchVeiledere = () =>
     get<Veileder[]>(`${SYFOVEILEDER_ROOT}/veiledere/enhet/${aktivEnhet}`);
 
-  return useQuery({
+  const query = useQuery<Veileder[], ApiErrorException>({
     queryKey: veiledereQueryKeys.veiledereForEnhet(aktivEnhet),
     queryFn: fetchVeiledere,
     enabled: !!aktivEnhet,
-    onError: (error) => {
-      if (error instanceof ApiErrorException && error.code === 403) {
-        throwError(error);
+  });
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      clearNotification('fetchVeiledereFailed');
+    }
+  }, [query.isSuccess, clearNotification]);
+
+  useEffect(() => {
+    if (query.isError) {
+      if (query.error.code === 403) {
+        throwError(query.error);
       } else {
         displayNotification(FetchVeiledereFailed);
       }
-    },
-    onSuccess: () => {
-      clearNotification('fetchVeiledereFailed');
-    },
-  });
+    }
+  }, [throwError, query.isError, query.error, displayNotification]);
+
+  return query;
 };
 
 export const useAktivVeilederQuery = () => {
@@ -57,20 +66,28 @@ export const useAktivVeilederQuery = () => {
   const fetchVeilederInfo = () =>
     get<VeilederinfoDTO>(`${SYFOVEILEDER_ROOT}/veileder/self`);
 
-  return useQuery({
+  const query = useQuery<VeilederinfoDTO, ApiErrorException>({
     queryKey: veiledereQueryKeys.veiledereInfo,
     queryFn: fetchVeilederInfo,
-    onError: (error) => {
-      if (error instanceof ApiErrorException && error.code === 403) {
-        throwError(error);
+  });
+
+  useEffect(() => {
+    if (query.isSuccess) {
+      clearNotification('fetchAktivVeilederFailed');
+    }
+  }, [query.isSuccess, clearNotification]);
+
+  useEffect(() => {
+    if (query.isError) {
+      if (query.error.code === 403) {
+        throwError(query.error);
       } else {
         displayNotification(FetchAktivVeilederFailed);
       }
-    },
-    onSuccess: () => {
-      clearNotification('fetchAktivVeilederFailed');
-    },
-  });
+    }
+  }, [throwError, query.isError, query.error, displayNotification]);
+
+  return query;
 };
 
 export const useTildelVeileder = () => {
@@ -126,9 +143,9 @@ export const useTildelVeileder = () => {
       );
     },
     onSettled: () => {
-      queryClient.invalidateQueries(
-        personoversiktQueryKeys.personoversiktEnhet(aktivEnhet)
-      );
+      queryClient.invalidateQueries({
+        queryKey: personoversiktQueryKeys.personoversiktEnhet(aktivEnhet),
+      });
     },
   });
 };

src/data/veiledereQueryHooks.ts

@@ -25,7 +25,7 @@ const queryClient = new QueryClient({
     queries: {
       networkMode: 'offlineFirst',
       refetchOnWindowFocus: false,
-      cacheTime: minutesToMillis(60),
+      gcTime: minutesToMillis(60),
       staleTime: minutesToMillis(30),
       retry: (failureCount, error) => {
         if (isClientError(error)) {

src/index.tsx

@@ -3,11 +3,4 @@ import { QueryClient } from '@tanstack/react-query';
 export const testQueryClient = () =>
   new QueryClient({
     defaultOptions: { queries: { retry: false } },
-    logger: {
-      log: console.log,
-      warn: console.warn,
-      error: () => {
-        /*empty*/
-      },
-    },
   });