Skip to content

Commit 6e081c6

Browse files
vebnorvebnor
authored
Tanstack query (#3605)
* @tanstack/react-query@v4 * wip * omit querykey siden den settes * fikse funksjoner * fix * fiks typer * fikse typer osv * bug? * sånn * diverse fixes * bugfix
1 parent 986912d commit 6e081c6

File tree

24 files changed

+258
-281
lines changed

24 files changed

+258
-281
lines changed

‎e2e/tests/reservasjoner.spec.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ test.beforeEach(async ({ page }) => {
3030
});
3131

3232
test('Kan søke opp og reservere opppgave', async ({ page }) => {
33-
const searchInput = page.getByLabel('Søk på saksnummer, personnummer eller journalpostID');
33+
const searchInput = page.getByLabel('Søk på saksnummer, personnummer eller journalpost-id');
3434
await searchInput.click();
3535
await searchInput.fill(saksnummer);
3636

@@ -39,15 +39,15 @@ test('Kan søke opp og reservere opppgave', async ({ page }) => {
3939
await searchButton.click();
4040

4141
await page.waitForResponse(
42-
(response) => response.url().includes('/api/k9-los-api/fagsak/sok') && response.status() === 200,
42+
(response) => response.url().includes('/api/k9-los-api/ny-oppgavestyring/sok') && response.status() === 200,
4343
);
4444

4545
const searchResult = page.getByRole('cell', { name: saksnummer });
4646
await expect(searchResult).toBeVisible();
4747
await searchResult.click();
4848

4949
expect(page.getByText('Hva ønsker du å gjøre med oppgaven?')).toBeVisible();
50-
await page.getByRole('button', { name: 'Reserver og åpne oppgaven' }).click();
50+
await page.getByRole('button', { name: 'Reserver og åpne oppgave' }).click();
5151

5252
await page.waitForResponse(
5353
(response) =>

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@sentry/browser": "8.48.0",
3131
"@sentry/cli": "2.40.0",
3232
"@sentry/react": "8.48.0",
33+
"@tanstack/react-query": "^5.63.0",
3334
"axios": "1.7.9",
3435
"classnames": "2.5.1",
3536
"dayjs": "1.11.13",
@@ -84,7 +85,6 @@
8485
"react-intl": "7.1.0",
8586
"react-modal": "3.16.3",
8687
"react-popper": "2.3.0",
87-
"react-query": "3.39.3",
8888
"react-router": "7.1.1",
8989
"tailwindcss": "3.4.17",
9090
"uuid": "11.0.5"
@@ -113,6 +113,7 @@
113113
"@storybook/react": "8.4.7",
114114
"@storybook/react-webpack5": "8.4.7",
115115
"@storybook/test": "8.4.7",
116+
"@tanstack/react-query-devtools": "^5.63.0",
116117
"@testing-library/dom": "10.4.0",
117118
"@testing-library/jest-dom": "6.6.3",
118119
"@testing-library/react": "16.1.0",
@@ -185,7 +186,7 @@
185186
"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",
186187
"dev": "yarn dev-env-variables cross-env node webpack/webpack.dev.server.mjs --config webpack/webpack.dev.mjs",
187188
"build": "cross-env NODE_ENV=production SENTRY_RELEASE=$(git rev-parse --short HEAD) webpack --config webpack/webpack.prod.mjs",
188-
"ts-check": "tsc --pretty",
189+
"ts-check": "tsc --pretty --skipLibCheck",
189190
"lint": "eslint --cache --fix \"src/**/*.ts?(x)\"",
190191
"up": "docker-compose up -d --remove-orphans --build",
191192
"down": "docker-compose down",

‎setup/testHelpers/testUtils.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { IntlProvider } from 'react-intl';
3-
import { QueryClient, QueryClientProvider } from 'react-query';
43
import { BrowserRouter } from 'react-router';
4+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
55
import { render as rtlRender } from '@testing-library/react';
66
import kodeverk from 'mocks/kodeverk';
77
import { k9LosApi } from 'api/k9LosApi';

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

+59-33
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UseQueryOptions, useMutation, useQuery, useQueryClient } from 'react-query';
1+
import { DefaultError, UseQueryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
22
import apiPaths from 'api/apiPaths';
33
import { Saksbehandler } from 'avdelingsleder/bemanning/saksbehandlerTsType';
44
import Reservasjon from 'avdelingsleder/reservasjoner/reservasjonTsType';
@@ -16,7 +16,10 @@ export const useLeggTilSaksbehandler = () => {
1616

1717
return useMutation({
1818
mutationFn: (data: { epost: string }) => axiosInstance.post(apiPaths.leggTilSaksbehandlerAvdelingsleder, data),
19-
onSuccess: () => queryClient.invalidateQueries(apiPaths.hentSaksbehandlereAvdelingsleder),
19+
onSuccess: () =>
20+
queryClient.invalidateQueries({
21+
queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder],
22+
}),
2023
});
2124
};
2225

@@ -27,11 +30,15 @@ export const useSlettSaksbehandler = () => {
2730
mutationFn: (data: { epost: string }) => axiosInstance.post(apiPaths.slettSaksbehandler, data),
2831
onSuccess: () =>
2932
Promise.all([
30-
queryClient.invalidateQueries(apiPaths.hentSaksbehandlereAvdelingsleder),
31-
// invaliderer alle oppgavekøer, siden dette endepunktet inneholder alle saksbehandlere som er på hver kø
32-
queryClient.invalidateQueries(apiPaths.hentOppgaveko('')),
33-
// viser antallet saksbehandlere på kø, denne kan ha endret seg
34-
queryClient.invalidateQueries(apiPaths.hentOppgavekoer),
33+
queryClient.invalidateQueries({
34+
queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder],
35+
}),
36+
queryClient.invalidateQueries({
37+
queryKey: [apiPaths.hentOppgaveko('')],
38+
}),
39+
queryClient.invalidateQueries({
40+
queryKey: [apiPaths.hentOppgavekoer],
41+
}),
3542
]),
3643
});
3744
};
@@ -43,7 +50,6 @@ export const useHentAndreSaksbehandleresKøer = (id: number) =>
4350
axiosInstance.get(apiPaths.hentAndreSaksbehandleresKøerV3, { params: { id } }).then(({ data }) => data),
4451
});
4552

46-
4753
export const useAlleKoer = (options = {}) =>
4854
useQuery<OppgavekøerV3, unknown, OppgavekøV3Enkel[]>({
4955
queryKey: [apiPaths.hentOppgavekoer],
@@ -56,9 +62,13 @@ export const useNyKøMutation = (callback) => {
5662

5763
return useMutation<OppgavekøV3, unknown, { url: string; body: { tittel: string } }>({
5864
onSuccess: (data) =>
59-
queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
60-
if (callback) callback(data.id);
61-
}),
65+
queryClient
66+
.invalidateQueries({
67+
queryKey: [apiPaths.hentOppgavekoer],
68+
})
69+
.then(() => {
70+
if (callback) callback(data.id);
71+
}),
6272
});
6373
};
6474

@@ -69,7 +79,9 @@ interface KopierKøPayload {
6979
taMedSaksbehandlere: boolean;
7080
}
7181

72-
export const useAvdelingslederReservasjoner = (options: UseQueryOptions<Reservasjon[], unknown, Reservasjon[]> = {}) =>
82+
export const useAvdelingslederReservasjoner = (
83+
options?: Omit<UseQueryOptions<Reservasjon[], DefaultError, Reservasjon[]>, 'queryKey'>,
84+
) =>
7385
useQuery<Reservasjon[], unknown, Reservasjon[]>({
7486
queryKey: [apiPaths.avdelinglederReservasjoner],
7587
...options,
@@ -81,9 +93,13 @@ export const useKopierKøMutation = (callback?: () => void) => {
8193
return useMutation({
8294
mutationFn: (data: KopierKøPayload) => axiosInstance.post(`${apiPaths.kopierOppgaveko}`, data),
8395
onSuccess: () =>
84-
queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
85-
if (callback) callback();
86-
}),
96+
queryClient
97+
.invalidateQueries({
98+
queryKey: [apiPaths.hentOppgavekoer],
99+
})
100+
.then(() => {
101+
if (callback) callback();
102+
}),
87103
});
88104
};
89105

@@ -93,32 +109,42 @@ export const useSlettKøMutation = (callback?: () => void) => {
93109
return useMutation({
94110
mutationFn: (id: string) => axiosInstance.delete(`${apiPaths.slettOppgaveko}${id}`),
95111
onSuccess: () =>
96-
queryClient.invalidateQueries(apiPaths.hentOppgavekoer).then(() => {
97-
if (callback) callback();
98-
}),
112+
queryClient
113+
.invalidateQueries({
114+
queryKey: [apiPaths.hentOppgavekoer],
115+
})
116+
.then(() => {
117+
if (callback) callback();
118+
}),
99119
});
100120
};
101121

102122
export const useOppdaterKøMutation = (callback: () => void) => {
103123
const queryClient = useQueryClient();
104-
return useMutation<OppgavekøV3, unknown, OppgavekøV3>(
105-
(payload) => axiosInstance.post(`${apiPaths.oppdaterOppgaveko}`, { ...payload }).then((res) => res.data),
106-
{
107-
onSuccess: (props) => {
108-
const { id } = props;
109-
Promise.all([
110-
queryClient.invalidateQueries(apiPaths.hentOppgavekoer),
111-
queryClient.invalidateQueries(apiPaths.hentOppgaveko(id)),
112-
queryClient.invalidateQueries(apiPaths.antallOppgaverIKoV3(id)),
113-
]).then(() => {
114-
if (callback) callback();
115-
});
116-
},
124+
return useMutation({
125+
mutationFn: (payload: { ['key']: string }) =>
126+
axiosInstance.post(`${apiPaths.oppdaterOppgaveko}`, { ...payload }).then((res) => res.data),
127+
128+
onSuccess: (props) => {
129+
const { id } = props;
130+
Promise.all([
131+
queryClient.invalidateQueries({
132+
queryKey: [apiPaths.hentOppgavekoer],
133+
}),
134+
queryClient.invalidateQueries({
135+
queryKey: [apiPaths.hentOppgaveko(id)],
136+
}),
137+
queryClient.invalidateQueries({
138+
queryKey: [apiPaths.antallOppgaverIKoV3(id)],
139+
}),
140+
]).then(() => {
141+
if (callback) callback();
142+
});
117143
},
118-
);
144+
});
119145
};
120146

121-
export const useKo = (id: string, options: UseQueryOptions<OppgavekøV3>) =>
147+
export const useKo = (id: string, options?: Omit<UseQueryOptions<OppgavekøV3>, 'queryKey'>) =>
122148
useQuery<OppgavekøV3, unknown, OppgavekøV3>({
123149
...options,
124150
queryKey: [apiPaths.hentOppgaveko(id)],

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

+26-23
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UseMutationOptions, UseQueryOptions, useMutation, useQuery, useQueryClient } from 'react-query';
1+
import { UseMutationOptions, UseQueryOptions, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
22
import NavAnsatt from 'app/navAnsattTsType';
33
import apiPaths from 'api/apiPaths';
44
import { SaksbehandlerEnkel } from 'avdelingsleder/bemanning/saksbehandlerTsType';
@@ -11,58 +11,61 @@ import { SøkeboksOppgaveDto } from 'saksbehandler/sokeboks/SøkeboksOppgaveDto'
1111
import EndreOppgaveType from 'types/EndreOppgaveType';
1212
import { OppgaveNøkkel } from 'types/OppgaveNøkkel';
1313
import OppgaveV3 from 'types/OppgaveV3';
14-
import { OppgavekøV3Enkel } from 'types/OppgavekøV3Type';
14+
import { OppgavekøV3, OppgavekøV3Enkel } from 'types/OppgavekøV3Type';
1515
import { axiosInstance } from 'utils/reactQueryConfig';
1616

17-
export const useInnloggetSaksbehandler = (options: UseQueryOptions<NavAnsatt, Error> = {}) =>
18-
useQuery(apiPaths.saksbehandler, {
17+
export const useInnloggetSaksbehandler = (options?: Omit<UseQueryOptions<NavAnsatt, Error>, 'queryKey'>) =>
18+
useQuery({
1919
...options,
20-
staleTime: Infinity,
21-
cacheTime: Infinity,
20+
queryKey: [apiPaths.saksbehandler],
21+
gcTime: Infinity,
2222
refetchOnWindowFocus: false,
2323
});
24-
export const useGetAlleSaksbehandlere = (options: UseQueryOptions<SaksbehandlerEnkel[], Error> = {}) =>
25-
useQuery<SaksbehandlerEnkel[], Error>(apiPaths.hentSaksbehandlereSomSaksbehandler, options);
24+
export const useGetAlleSaksbehandlere = (options?: Omit<UseQueryOptions<SaksbehandlerEnkel[], Error>, 'queryKey'>) =>
25+
useQuery<SaksbehandlerEnkel[], Error>({ queryKey: [apiPaths.hentSaksbehandlereSomSaksbehandler], ...options });
2626

2727
export const useAntallOppgaverIKoV3UtenReserverte = (
2828
koId: string,
29-
options: UseQueryOptions<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }> = {},
29+
options: Omit<UseQueryOptions<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }>, 'queryKey'>,
3030
) =>
3131
useQuery<{ antallUtenReserverte: number }, Error, { antallUtenReserverte: number }>({
3232
queryKey: [apiPaths.antallOppgaverIKoV3UtenReserverte(koId)],
3333
...options,
3434
});
3535

36-
export const useAlleSaksbehandlerKoerV1 = (options: UseQueryOptions<OppgavekøV1[], Error> = {}) =>
36+
export const useAlleSaksbehandlerKoerV1 = (options?: Omit<UseQueryOptions<OppgavekøV1[], Error>, 'queryKey'>) =>
3737
useQuery<OppgavekøV1[], Error>({
3838
queryKey: [apiPaths.hentAlleKoerSaksbehandlerV1],
3939
...options,
4040
});
4141

42-
export const useAlleSaksbehandlerKoerV3 = (options: UseQueryOptions<OppgavekøV3Enkel[], Error> = {}) =>
43-
useQuery<OppgavekøV3Enkel[], Error>({
42+
export const useAlleSaksbehandlerKoerV3 = (options?: Omit<UseQueryOptions<OppgavekøV3[], Error>, 'queryKey'>) =>
43+
useQuery<OppgavekøV3[], Error>({
4444
queryKey: [apiPaths.hentAlleKoerSaksbehandlerV3],
4545
...options,
4646
});
4747

48-
export const useSaksbehandlerNesteTiV3 = (id: string, options: UseQueryOptions<OppgaveV3[], Error> = {}) =>
48+
export const useSaksbehandlerNesteTiV3 = (
49+
id: string,
50+
options?: Omit<UseQueryOptions<OppgaveV3[], Error>, 'queryKey'>,
51+
) =>
4952
useQuery<OppgaveV3[], Error, OppgaveV3[]>({
5053
queryKey: [apiPaths.hentTiNesteIKoV3(id)],
5154
...options,
5255
});
5356

54-
export const useSaksbehandlerNesteTiV1 = (id: string, options: UseQueryOptions<Oppgave[], Error> = {}) =>
57+
export const useSaksbehandlerNesteTiV1 = (id: string, options?: Omit<UseQueryOptions<Oppgave[], Error>, 'queryKey'>) =>
5558
useQuery<Oppgave[], Error, Oppgave[]>({
5659
queryKey: [apiPaths.saksbehandlerNesteOppgaver(id)],
5760
...options,
5861
});
5962

60-
export const useSaksbehandlerReservasjoner = (options: UseQueryOptions<ReservasjonV3[], Error> = {}) =>
63+
export const useSaksbehandlerReservasjoner = (options?: Omit<UseQueryOptions<ReservasjonV3[], Error>, 'queryKey'>) =>
6164
useQuery<ReservasjonV3[], Error, ReservasjonV3[]>({
6265
queryKey: [apiPaths.saksbehandlerReservasjoner],
6366
...options,
6467
});
65-
export const useSøk = (options: UseMutationOptions<SokeResultat, Error, string> = {}) =>
68+
export const useSøk = (options?: UseMutationOptions<SokeResultat, Error, string>) =>
6669
useMutation({
6770
...options,
6871
mutationFn: (searchString: string): Promise<SokeResultat> =>
@@ -73,8 +76,8 @@ export const useReserverOppgaveMutation = (onSuccess?: () => void) => {
7376
const queryClient = useQueryClient();
7477
return useMutation({
7578
onSuccess: () => {
76-
queryClient.refetchQueries(apiPaths.saksbehandlerReservasjoner);
77-
queryClient.refetchQueries(apiPaths.avdelinglederReservasjoner);
79+
queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
80+
queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
7881
if (onSuccess) onSuccess();
7982
},
8083
mutationFn: (oppgaveNøkkel: OppgaveNøkkel): Promise<OppgaveStatus> =>
@@ -87,8 +90,8 @@ export const useEndreReservasjoner = (onSuccess?: () => void) => {
8790
return useMutation<OppgaveStatus, Error, EndreOppgaveType[]>({
8891
mutationFn: (data) => axiosInstance.post(apiPaths.endreReservasjoner, data),
8992
onSuccess: () => {
90-
queryClient.refetchQueries(apiPaths.saksbehandlerReservasjoner);
91-
queryClient.refetchQueries(apiPaths.avdelinglederReservasjoner);
93+
queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
94+
queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
9295
if (onSuccess) onSuccess();
9396
},
9497
});
@@ -100,7 +103,7 @@ export const usePlukkOppgaveMutation = (callback?: (oppgave: ReservasjonV3FraKø
100103
mutationFn: (data: { oppgaveKøId: string }): Promise<ReservasjonV3FraKøDto> =>
101104
axiosInstance.post(`${apiPaths.hentOppgaveFraKoV3(data.oppgaveKøId)}`, data).then((response) => response.data),
102105
onSuccess: (data: ReservasjonV3FraKøDto) => {
103-
queryClient.invalidateQueries(apiPaths.saksbehandlerReservasjoner).then(() => {
106+
queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] }).then(() => {
104107
if (callback) callback(data);
105108
});
106109
},
@@ -113,8 +116,8 @@ export const useOpphevReservasjoner = (onSuccess?: () => void) => {
113116
mutationFn: (data: Array<{ oppgaveNøkkel: OppgaveNøkkel }>) =>
114117
axiosInstance.post(apiPaths.opphevReservasjoner, data),
115118
onSuccess: () => {
116-
queryClient.invalidateQueries(apiPaths.saksbehandlerReservasjoner);
117-
queryClient.invalidateQueries(apiPaths.avdelinglederReservasjoner);
119+
queryClient.refetchQueries({ queryKey: [apiPaths.saksbehandlerReservasjoner] });
120+
queryClient.refetchQueries({ queryKey: [apiPaths.avdelinglederReservasjoner] });
118121
if (onSuccess) onSuccess();
119122
},
120123
});

‎src/client/app/app/AppContainer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
2-
import { QueryClient, QueryClientProvider } from 'react-query';
3-
import { ReactQueryDevtools } from 'react-query/devtools';
42
import { BrowserRouter } from 'react-router';
3+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
4+
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
55
import AppIndex from 'app/AppIndex';
66
import { RestApiErrorProvider } from 'api/error/RestApiErrorContext';
77
import { k9LosApi } from 'api/k9LosApi';

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

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { FunctionComponent, useEffect, useMemo } from 'react';
2-
import { useQuery, useQueryClient } from 'react-query';
32
import { Route, Routes } from 'react-router';
43
import { withSentryReactRouterV6Routing } from '@sentry/react';
4+
import { useQuery, useQueryClient } from '@tanstack/react-query';
55
import AppContext from 'app/AppContext';
66
import apiPaths from 'api/apiPaths';
77
import { useInnloggetSaksbehandler } from 'api/queries/saksbehandlerQueries';
@@ -20,17 +20,23 @@ import MissingPage from './MissingPage';
2020

2121
const SentryRoutes = withSentryReactRouterV6Routing(Routes);
2222
const Home: FunctionComponent = () => {
23-
const { data } = useQuery<{ felter: Oppgavefelt[] }>(apiPaths.hentOppgaveFelter);
23+
const { data } = useQuery({
24+
queryKey: [apiPaths.hentOppgaveFelter]
25+
});
2426
const { data: saksbehandler } = useInnloggetSaksbehandler();
2527

2628
const queryClient = useQueryClient();
2729

2830
useEffect(() => {
2931
if (saksbehandler.brukerIdent) {
3032
if (saksbehandler.kanOppgavestyre) {
31-
queryClient.prefetchQuery(apiPaths.hentSaksbehandlereAvdelingsleder);
33+
queryClient.prefetchQuery({
34+
queryKey: [apiPaths.hentSaksbehandlereAvdelingsleder]
35+
});
3236
}
33-
queryClient.prefetchQuery(apiPaths.hentSaksbehandlereSomSaksbehandler);
37+
queryClient.prefetchQuery({
38+
queryKey: [apiPaths.hentSaksbehandlereSomSaksbehandler]
39+
});
3440
}
3541
}, [queryClient, saksbehandler.brukerIdent, saksbehandler.kanOppgavestyre]);
3642

0 commit comments

Comments
 (0)