Upgrade to react query v5 (#263) (#265)

* Upgrade to react query v5 (#263)

* Upggrade to react-query 5

* Change from isloading to isPending

* Change from cacheTime to gcTime

(cherry picked from commit 5de0031)

* Move react query devtool

cypress/utils/mountWithMocks.tsx

@@ -98,7 +98,7 @@ const ReactQueryProvider = ({
           defaultOptions: {
             queries: {
               refetchOnWindowFocus: false,
-              cacheTime: minutesToMillis(60),
+              gcTime: minutesToMillis(60),
               staleTime: minutesToMillis(30),
             },
           },

package.json

@@ -29,8 +29,8 @@
     "@navikt/ds-react": "^5.0.2",
     "@navikt/nav-dekoratoren-moduler": "^2.1.3",
     "@navikt/next-logger": "^1.19.0",
-    "@tanstack/react-query": "^4.32.6",
-    "@tanstack/react-query-devtools": "^4.32.6",
+    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query-devtools": "^5.4.3",
     "@types/http-errors": "^1.8.2",
     "@types/react-datepicker": "^4.4.2",
     "axios": "^1.4.0",

src/api/queries/arbeidsgiver/dinesykmeldteQueriesAG.ts

@@ -14,12 +14,10 @@ export const useDineSykmeldte = () => {
       "fetchDineSykmeldte"
     );
 
-  return useQuery<Sykmeldt, Error>(
-    [queryKeys.DINESYKMELDTE],
-    fetchDineSykmeldte,
-    {
-      enabled: !!narmestelederId,
-      useErrorBoundary: true,
-    }
-  );
+  return useQuery({
+    queryKey: [queryKeys.DINESYKMELDTE],
+    queryFn: fetchDineSykmeldte,
+    enabled: !!narmestelederId,
+    throwOnError: true,
+  });
 };

src/api/queries/arbeidsgiver/oppfolgingsplanerQueriesAG.ts

@@ -12,7 +12,6 @@ import {
   finnNyesteTidligereOppfolgingsplanMedVirksomhet,
   finnTidligereOppfolgingsplaner,
 } from "../../../utils/oppfolgingplanUtils";
-import { ApiErrorException } from "../../axios/errors";
 import { useDineSykmeldte } from "./dinesykmeldteQueriesAG";
 import { Oppfolgingsplan } from "../../../types/oppfolgingsplan";
 import { queryKeys } from "../queryKeys";
@@ -31,14 +30,12 @@ export const useOppfolgingsplanerAG = () => {
       "fetchOppfolgingsplanerAG"
     );
 
-  return useQuery<Oppfolgingsplan[], ApiErrorException>(
-    [queryKeys.OPPFOLGINGSPLANER],
-    fetchOppfolgingsplanerAG,
-    {
-      enabled: !!sykmeldtFnr,
-      useErrorBoundary: true,
-    }
-  );
+  return useQuery({
+    queryKey: [queryKeys.OPPFOLGINGSPLANER],
+    queryFn: fetchOppfolgingsplanerAG,
+    enabled: !!sykmeldtFnr,
+    throwOnError: true,
+  });
 };
 
 export const useAktiveOppfolgingsplanerAG = () => {
@@ -122,10 +119,12 @@ export const useOpprettOppfolgingsplanAG = () => {
         opprettOppfoelgingsplan
       );
     }
-    await queryClient.invalidateQueries([queryKeys.OPPFOLGINGSPLANER]);
+    await queryClient.invalidateQueries({
+      queryKey: [queryKeys.OPPFOLGINGSPLANER],
+    });
     const arbeidsOppgaverPage = `${landingPage}/${oppfolgingsplanId}/arbeidsoppgaver`;
     await router.push(arbeidsOppgaverPage);
   };
 
-  return useMutation(opprettOppfolgingsplanAG);
+  return useMutation({ mutationFn: opprettOppfolgingsplanAG });
 };

src/api/queries/arbeidsgiver/tilgangQueriesAG.ts

@@ -16,12 +16,10 @@ export const useTilgangAG = () => {
       "fetchTilgangAG"
     );
 
-  return useQuery<Tilgang, ApiErrorException>(
-    [queryKeys.TILGANG],
-    fetchTilgang,
-    {
-      enabled: !!sykmeldtData.data?.fnr,
-      useErrorBoundary: true,
-    }
-  );
+  return useQuery<Tilgang, ApiErrorException>({
+    queryKey: [queryKeys.TILGANG],
+    queryFn: fetchTilgang,
+    enabled: !!sykmeldtData.data?.fnr,
+    throwOnError: true,
+  });
 };