Tanstack query

e2e/tests/reservasjoner.spec.ts

@@ -30,7 +30,7 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('Kan søke opp og reservere opppgave', async ({ page }) => {
-	const searchInput = page.getByLabel('Søk på saksnummer, personnummer eller journalpostID');
+	const searchInput = page.getByLabel('Søk på saksnummer, personnummer eller journalpost-id');
 	await searchInput.click();
 	await searchInput.fill(saksnummer);
 
@@ -39,15 +39,15 @@ test('Kan søke opp og reservere opppgave', async ({ page }) => {
 	await searchButton.click();
 
 	await page.waitForResponse(
-		(response) => response.url().includes('/api/k9-los-api/fagsak/sok') && response.status() === 200,
+		(response) => response.url().includes('/api/k9-los-api/ny-oppgavestyring/sok') && response.status() === 200,
 	);
 
 	const searchResult = page.getByRole('cell', { name: saksnummer });
 	await expect(searchResult).toBeVisible();
 	await searchResult.click();
 
 	expect(page.getByText('Hva ønsker du å gjøre med oppgaven?')).toBeVisible();
-	await page.getByRole('button', { name: 'Reserver og åpne oppgaven' }).click();
+	await page.getByRole('button', { name: 'Reserver og åpne oppgave' }).click();
 
 	await page.waitForResponse(
 		(response) =>

package.json

@@ -30,6 +30,7 @@
 		"@sentry/browser": "8.48.0",
 		"@sentry/cli": "2.40.0",
 		"@sentry/react": "8.48.0",
+		"@tanstack/react-query": "^5.63.0",
 		"axios": "1.7.9",
 		"classnames": "2.5.1",
 		"dayjs": "1.11.13",
@@ -84,7 +85,6 @@
 		"react-intl": "7.1.0",
 		"react-modal": "3.16.3",
 		"react-popper": "2.3.0",
-		"react-query": "3.39.3",
 		"react-router": "7.1.1",
 		"tailwindcss": "3.4.17",
 		"uuid": "11.0.5"
@@ -113,6 +113,7 @@
 		"@storybook/react": "8.4.7",
 		"@storybook/react-webpack5": "8.4.7",
 		"@storybook/test": "8.4.7",
+		"@tanstack/react-query-devtools": "^5.63.0",
 		"@testing-library/dom": "10.4.0",
 		"@testing-library/jest-dom": "6.6.3",
 		"@testing-library/react": "16.1.0",
@@ -185,7 +186,7 @@
 		"dev-env-variables": "cross-env SOKEBOKS_NYE_KOER=enabled SAKSBEHANDLER_KAN_VELGE_NYE_KOER=enabled AVDELINGSLEDER_TILGANG_TIL_NYE_KOER=enabled K9_LOS_API_URL=http://localhost:8020/api",
 		"dev": "yarn dev-env-variables cross-env node webpack/webpack.dev.server.mjs --config webpack/webpack.dev.mjs",
 		"build": "cross-env NODE_ENV=production SENTRY_RELEASE=$(git rev-parse --short HEAD) webpack --config webpack/webpack.prod.mjs",
-		"ts-check": "tsc --pretty",
+		"ts-check": "tsc --pretty --skipLibCheck",
 		"lint": "eslint --cache --fix \"src/**/*.ts?(x)\"",
 		"up": "docker-compose up -d --remove-orphans --build",
 		"down": "docker-compose down",

setup/testHelpers/testUtils.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IntlProvider } from 'react-intl';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { BrowserRouter } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as rtlRender } from '@testing-library/react';
 import kodeverk from 'mocks/kodeverk';
 import { k9LosApi } from 'api/k9LosApi';

src/client/app/api/queries/avdelingslederQueries.ts

@@ -1,4 +1,4 @@
-import { UseQueryOptions, useMutation, useQuery, useQueryClient } from 'react-query';
+import { DefaultError, UseQueryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import apiPaths from 'api/apiPaths';
 import { Saksbehandler } from 'avdelingsleder/bemanning/saksbehandlerTsType';
 import Reservasjon from 'avdelingsleder/reservasjoner/reservasjonTsType';
@@ -16,7 +16,10 @@ export const useLeggTilSaksbehandler = () => {
 
 	return useMutation({
 		mutationFn: (data: { epost: string }) => axiosInstance.post(apiPaths.leggTilSaksbehandlerAvdelingsleder, data),
-		onSuccess: () => queryClient.invalidateQueries(apiPaths.hentSaksbehandlereAvdelingsleder),
+		onSuccess: () =>
+			queryClient.invalidateQueries({
+				queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder],
+			}),
 	});
 };
 
@@ -27,11 +30,15 @@ export const useSlettSaksbehandler = () => {
 		mutationFn: (data: { epost: string }) => axiosInstance.post(apiPaths.slettSaksbehandler, data),
 		onSuccess: () =>
 			Promise.all([
-				queryClient.invalidateQueries(apiPaths.hentSaksbehandlereAvdelingsleder),
-				// invaliderer alle oppgavekøer, siden dette endepunktet inneholder alle saksbehandlere som er på hver kø
-				queryClient.invalidateQueries(apiPaths.hentOppgaveko('')),
-				// viser antallet saksbehandlere på kø, denne kan ha endret seg
-				queryClient.invalidateQueries(apiPaths.hentOppgavekoer),
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.hentOppgaveko('')],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.hentOppgavekoer],
+				}),
 			]),
 	});
 };
@@ -43,7 +50,6 @@ export const useHentAndreSaksbehandleresKøer = (id: number) =>
 			axiosInstance.get(apiPaths.hentAndreSaksbehandleresKøerV3, { params: { id } }).then(({ data }) => data),
 	});
 
-
 export const useAlleKoer = (options = {}) =>
 	useQuery<OppgavekøerV3, unknown, OppgavekøV3Enkel[]>({
 		queryKey: [apiPaths.hentOppgavekoer],
@@ -56,9 +62,13 @@ export const useNyKøMutation = (callback) => {
 
 	return useMutation<OppgavekøV3, unknown, { url: string; body: { tittel: string } }>({
 		onSuccess: (data) =>
-			queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
-				if (callback) callback(data.id);
-			}),
+			queryClient
+				.invalidateQueries({
+					queryKey: [apiPaths.hentOppgavekoer],
+				})
+				.then(() => {
+					if (callback) callback(data.id);
+				}),
 	});
 };
 
@@ -69,7 +79,9 @@ interface KopierKøPayload {
 	taMedSaksbehandlere: boolean;
 }
 
-export const useAvdelingslederReservasjoner = (options: UseQueryOptions<Reservasjon[], unknown, Reservasjon[]> = {}) =>
+export const useAvdelingslederReservasjoner = (
+	options?: Omit<UseQueryOptions<Reservasjon[], DefaultError, Reservasjon[]>, 'queryKey'>,
+) =>
 	useQuery<Reservasjon[], unknown, Reservasjon[]>({
 		queryKey: [apiPaths.avdelinglederReservasjoner],
 		...options,
@@ -81,9 +93,13 @@ export const useKopierKøMutation = (callback?: () => void) => {
 	return useMutation({
 		mutationFn: (data: KopierKøPayload) => axiosInstance.post(`${apiPaths.kopierOppgaveko}`, data),
 		onSuccess: () =>
-			queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
-				if (callback) callback();
-			}),
+			queryClient
+				.invalidateQueries({
+					queryKey: [apiPaths.hentOppgavekoer],
+				})
+				.then(() => {
+					if (callback) callback();
+				}),
 	});
 };
 
@@ -93,32 +109,42 @@ export const useSlettKøMutation = (callback?: () => void) => {
 	return useMutation({
 		mutationFn: (id: string) => axiosInstance.delete(`${apiPaths.slettOppgaveko}${id}`),
 		onSuccess: () =>
-			queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
-				if (callback) callback();
-			}),
+			queryClient
+				.invalidateQueries({
+					queryKey: [apiPaths.hentOppgavekoer],
+				})
+				.then(() => {
+					if (callback) callback();
+				}),
 	});
 };
 
 export const useOppdaterKøMutation = (callback: () => void) => {
 	const queryClient = useQueryClient();
-	return useMutation<OppgavekøV3, unknown, OppgavekøV3>(
-		(payload) => axiosInstance.post(`${apiPaths.oppdaterOppgaveko}`, { ...payload }).then((res) => res.data),
-		{
-			onSuccess: (props) => {
-				const { id } = props;
-				Promise.all([
-					queryClient.invalidateQueries(apiPaths.hentOppgavekoer),
-					queryClient.invalidateQueries(apiPaths.hentOppgaveko(id)),
-					queryClient.invalidateQueries(apiPaths.antallOppgaverIKoV3(id)),
-				]).then(() => {
-					if (callback) callback();
-				});
-			},
+	return useMutation({
+		mutationFn: (payload: { ['key']: string }) =>
+			axiosInstance.post(`${apiPaths.oppdaterOppgaveko}`, { ...payload }).then((res) => res.data),
+
+		onSuccess: (props) => {
+			const { id } = props;
+			Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.hentOppgavekoer],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.hentOppgaveko(id)],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: [apiPaths.antallOppgaverIKoV3(id)],
+				}),
+			]).then(() => {
+				if (callback) callback();
+			});
 		},
-	);
+	});
 };
 
-export const useKo = (id: string, options: UseQueryOptions<OppgavekøV3>) =>
+export const useKo = (id: string, options?: Omit<UseQueryOptions<OppgavekøV3>, 'queryKey'>) =>
 	useQuery<OppgavekøV3, unknown, OppgavekøV3>({
 		...options,
 		queryKey: [apiPaths.hentOppgaveko(id)],

src/client/app/api/queries/saksbehandlerQueries.ts

@@ -1,4 +1,4 @@
-import { UseMutationOptions, UseQueryOptions, useMutation, useQuery, useQueryClient } from 'react-query';
+import { UseMutationOptions, UseQueryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import NavAnsatt from 'app/navAnsattTsType';
 import apiPaths from 'api/apiPaths';
 import { SaksbehandlerEnkel } from 'avdelingsleder/bemanning/saksbehandlerTsType';
@@ -11,58 +11,61 @@ import { SøkeboksOppgaveDto } from 'saksbehandler/sokeboks/SøkeboksOppgaveDto'
 import EndreOppgaveType from 'types/EndreOppgaveType';
 import { OppgaveNøkkel } from 'types/OppgaveNøkkel';
 import OppgaveV3 from 'types/OppgaveV3';
-import { OppgavekøV3Enkel } from 'types/OppgavekøV3Type';
+import { OppgavekøV3, OppgavekøV3Enkel } from 'types/OppgavekøV3Type';
 import { axiosInstance } from 'utils/reactQueryConfig';
 
-export const useInnloggetSaksbehandler = (options: UseQueryOptions<NavAnsatt, Error> = {}) =>
-	useQuery(apiPaths.saksbehandler, {
+export const useInnloggetSaksbehandler = (options?: Omit<UseQueryOptions<NavAnsatt, Error>, 'queryKey'>) =>
+	useQuery({
 		...options,
-		staleTime: Infinity,
-		cacheTime: Infinity,
+		queryKey: [apiPaths.saksbehandler],
+		gcTime: Infinity,
 		refetchOnWindowFocus: false,
 	});
-export const useGetAlleSaksbehandlere = (options: UseQueryOptions<SaksbehandlerEnkel[], Error> = {}) =>
-	useQuery<SaksbehandlerEnkel[], Error>(apiPaths.hentSaksbehandlereSomSaksbehandler, options);
+export const useGetAlleSaksbehandlere = (options?: Omit<UseQueryOptions<SaksbehandlerEnkel[], Error>, 'queryKey'>) =>
+	useQuery<SaksbehandlerEnkel[], Error>({ queryKey: [apiPaths.hentSaksbehandlereSomSaksbehandler], ...options });
 
 export const useAntallOppgaverIKoV3UtenReserverte = (
 	koId: string,
-	options: UseQueryOptions<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }> = {},
+	options: Omit<UseQueryOptions<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }>, 'queryKey'>,
 ) =>
 	useQuery<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }>({
 		queryKey: [apiPaths.antallOppgaverIKoV3UtenReserverte(koId)],
 		...options,
 	});
 
-export const useAlleSaksbehandlerKoerV1 = (options: UseQueryOptions<OppgavekøV1[], Error> = {}) =>
+export const useAlleSaksbehandlerKoerV1 = (options?: Omit<UseQueryOptions<OppgavekøV1[], Error>, 'queryKey'>) =>
 	useQuery<OppgavekøV1[], Error>({
 		queryKey: [apiPaths.hentAlleKoerSaksbehandlerV1],
 		...options,
 	});
 
-export const useAlleSaksbehandlerKoerV3 = (options: UseQueryOptions<OppgavekøV3Enkel[], Error> = {}) =>
-	useQuery<OppgavekøV3Enkel[], Error>({
+export const useAlleSaksbehandlerKoerV3 = (options?: Omit<UseQueryOptions<OppgavekøV3[], Error>, 'queryKey'>) =>
+	useQuery<OppgavekøV3[], Error>({
 		queryKey: [apiPaths.hentAlleKoerSaksbehandlerV3],
 		...options,
 	});
 
-export const useSaksbehandlerNesteTiV3 = (id: string, options: UseQueryOptions<OppgaveV3[], Error> = {}) =>
+export const useSaksbehandlerNesteTiV3 = (
+	id: string,
+	options?: Omit<UseQueryOptions<OppgaveV3[], Error>, 'queryKey'>,
+) =>
 	useQuery<OppgaveV3[], Error, OppgaveV3[]>({
 		queryKey: [apiPaths.hentTiNesteIKoV3(id)],
 		...options,
 	});
 
-export const useSaksbehandlerNesteTiV1 = (id: string, options: UseQueryOptions<Oppgave[], Error> = {}) =>
+export const useSaksbehandlerNesteTiV1 = (id: string, options?: Omit<UseQueryOptions<Oppgave[], Error>, 'queryKey'>) =>
 	useQuery<Oppgave[], Error, Oppgave[]>({
 		queryKey: [apiPaths.saksbehandlerNesteOppgaver(id)],
 		...options,
 	});
 
-export const useSaksbehandlerReservasjoner = (options: UseQueryOptions<ReservasjonV3[], Error> = {}) =>
+export const useSaksbehandlerReservasjoner = (options?: Omit<UseQueryOptions<ReservasjonV3[], Error>, 'queryKey'>) =>
 	useQuery<ReservasjonV3[], Error, ReservasjonV3[]>({
 		queryKey: [apiPaths.saksbehandlerReservasjoner],
 		...options,
 	});
-export const useSøk = (options: UseMutationOptions<SokeResultat, Error, string> = {}) =>
+export const useSøk = (options?: UseMutationOptions<SokeResultat, Error, string>) =>
 	useMutation({
 		...options,
 		mutationFn: (searchString: string): Promise<SokeResultat> =>
@@ -73,8 +76,8 @@ export const useReserverOppgaveMutation = (onSuccess?: () => void) => {
 	const queryClient = useQueryClient();
 	return useMutation({
 		onSuccess: () => {
-			queryClient.refetchQueries(apiPaths.saksbehandlerReservasjoner);
-			queryClient.refetchQueries(apiPaths.avdelinglederReservasjoner);
+			queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
+			queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
 			if (onSuccess) onSuccess();
 		},
 		mutationFn: (oppgaveNøkkel: OppgaveNøkkel): Promise<OppgaveStatus> =>
@@ -87,8 +90,8 @@ export const useEndreReservasjoner = (onSuccess?: () => void) => {
 	return useMutation<OppgaveStatus, Error, EndreOppgaveType[]>({
 		mutationFn: (data) => axiosInstance.post(apiPaths.endreReservasjoner, data),
 		onSuccess: () => {
-			queryClient.refetchQueries(apiPaths.saksbehandlerReservasjoner);
-			queryClient.refetchQueries(apiPaths.avdelinglederReservasjoner);
+			queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
+			queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
 			if (onSuccess) onSuccess();
 		},
 	});
@@ -100,7 +103,7 @@ export const usePlukkOppgaveMutation = (callback?: (oppgave: ReservasjonV3FraKø
 		mutationFn: (data: { oppgaveKøId: string }): Promise<ReservasjonV3FraKøDto> =>
 			axiosInstance.post(`${apiPaths.hentOppgaveFraKoV3(data.oppgaveKøId)}`, data).then((response) => response.data),
 		onSuccess: (data: ReservasjonV3FraKøDto) => {
-			queryClient.invalidateQueries(apiPaths.saksbehandlerReservasjoner).then(() => {
+			queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] }).then(() => {
 				if (callback) callback(data);
 			});
 		},
@@ -113,8 +116,8 @@ export const useOpphevReservasjoner = (onSuccess?: () => void) => {
 		mutationFn: (data: Array<{ oppgaveNøkkel: OppgaveNøkkel }>) =>
 			axiosInstance.post(apiPaths.opphevReservasjoner, data),
 		onSuccess: () => {
-			queryClient.invalidateQueries(apiPaths.saksbehandlerReservasjoner);
-			queryClient.invalidateQueries(apiPaths.avdelinglederReservasjoner);
+			queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
+			queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
 			if (onSuccess) onSuccess();
 		},
 	});

src/client/app/app/AppContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-import { ReactQueryDevtools } from 'react-query/devtools';
 import { BrowserRouter } from 'react-router';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import AppIndex from 'app/AppIndex';
 import { RestApiErrorProvider } from 'api/error/RestApiErrorContext';
 import { k9LosApi } from 'api/k9LosApi';

src/client/app/app/components/Home.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useEffect, useMemo } from 'react';
-import { useQuery, useQueryClient } from 'react-query';
 import { Route, Routes } from 'react-router';
 import { withSentryReactRouterV6Routing } from '@sentry/react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import AppContext from 'app/AppContext';
 import apiPaths from 'api/apiPaths';
 import { useInnloggetSaksbehandler } from 'api/queries/saksbehandlerQueries';
@@ -20,17 +20,23 @@ import MissingPage from './MissingPage';
 
 const SentryRoutes = withSentryReactRouterV6Routing(Routes);
 const Home: FunctionComponent = () => {
-	const { data } = useQuery<{ felter: Oppgavefelt[] }>(apiPaths.hentOppgaveFelter);
+	const { data } = useQuery({
+        queryKey: [apiPaths.hentOppgaveFelter]
+    });
 	const { data: saksbehandler } = useInnloggetSaksbehandler();
 
 	const queryClient = useQueryClient();
 
 	useEffect(() => {
 		if (saksbehandler.brukerIdent) {
 			if (saksbehandler.kanOppgavestyre) {
-				queryClient.prefetchQuery(apiPaths.hentSaksbehandlereAvdelingsleder);
+				queryClient.prefetchQuery({
+                    queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder]
+                });
 			}
-			queryClient.prefetchQuery(apiPaths.hentSaksbehandlereSomSaksbehandler);
+			queryClient.prefetchQuery({
+                queryKey: [apiPaths.hentSaksbehandlereSomSaksbehandler]
+            });
 		}
 	}, [queryClient, saksbehandler.brukerIdent, saksbehandler.kanOppgavestyre]);