coder · BrunoQuaresma · May 26, 2025 · May 25, 2025 · May 25, 2025 · May 25, 2025
diff --git a/site/.storybook/preview.jsx b/site/.storybook/preview.jsx
@@ -28,7 +28,7 @@ import { DecoratorHelpers } from "@storybook/addon-themes";
 import isChromatic from "chromatic/isChromatic";
 import { StrictMode } from "react";
 import { HelmetProvider } from "react-helmet-async";
-import { QueryClient, QueryClientProvider, parseQueryArgs } from "react-query";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { withRouter } from "storybook-addon-remix-react-router";
 import "theme/globalFonts";
 import themes from "../src/theme";
@@ -114,20 +114,7 @@ function withQuery(Story, { parameters }) {

 	if (parameters.queries) {
 		for (const query of parameters.queries) {
-			if (query.isError) {
-				// Based on `setQueryData`, but modified to set the result as an error.
-				const cache = queryClient.getQueryCache();
-				const parsedOptions = parseQueryArgs(query.key);
-				const defaultedOptions = queryClient.defaultQueryOptions(parsedOptions);
-				// Adds an uninitialized response to the cache, which we can now mutate.
-				const cachedQuery = cache.build(queryClient, defaultedOptions);
-				// Setting `manual` prevents retries.
-				cachedQuery.setData(undefined, { manual: true });
-				// Set the `error` value and the appropriate status.
-				cachedQuery.setState({ error: query.data, status: "error" });
-			} else {
-				queryClient.setQueryData(query.key, query.data);
-			}
+			queryClient.setQueryData(query.key, query.data);
 		}
 	}


diff --git a/site/package.json b/site/package.json
@@ -69,7 +69,7 @@
 		"@radix-ui/react-slot": "1.1.1",
 		"@radix-ui/react-switch": "1.1.1",
 		"@radix-ui/react-tooltip": "1.1.7",
-		"@tanstack/react-query-devtools": "4.35.3",
+		"@tanstack/react-query-devtools": "5.77.0",
 		"@xterm/addon-canvas": "0.7.0",
 		"@xterm/addon-fit": "0.10.0",
 		"@xterm/addon-unicode11": "0.8.0",
@@ -103,7 +103,7 @@
 		"react-dom": "18.3.1",
 		"react-helmet-async": "2.0.5",
 		"react-markdown": "9.0.3",
-		"react-query": "npm:@tanstack/react-query@4.35.3",
+		"react-query": "npm:@tanstack/react-query@5.77.0",
 		"react-router-dom": "6.26.2",
 		"react-syntax-highlighter": "15.6.1",
 		"react-virtualized-auto-sizer": "1.0.24",

diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/api/queries/chats.ts b/site/src/api/queries/chats.ts
@@ -5,7 +5,7 @@ export const createChat = (queryClient: QueryClient) => {
 	return {
 		mutationFn: API.createChat,
 		onSuccess: async () => {
-			await queryClient.invalidateQueries(["chats"]);
+			await queryClient.invalidateQueries({ queryKey: ["chats"] });
 		},
 	};
 };

diff --git a/site/src/api/queries/debug.ts b/site/src/api/queries/debug.ts
@@ -13,7 +13,7 @@ export const health = () => ({
 export const refreshHealth = (queryClient: QueryClient) => {
 	return {
 		mutationFn: async () => {
-			await queryClient.cancelQueries(HEALTH_QUERY_KEY);
+			await queryClient.cancelQueries({ queryKey: HEALTH_QUERY_KEY });
 			const newHealthData = await API.getHealth(true);
 			queryClient.setQueryData(HEALTH_QUERY_KEY, newHealthData);
 		},
@@ -38,7 +38,7 @@ export const updateHealthSettings = (
 	return {
 		mutationFn: API.updateHealthSettings,
 		onSuccess: async (_, newSettings) => {
-			await queryClient.invalidateQueries(HEALTH_QUERY_KEY);
+			await queryClient.invalidateQueries({ queryKey: HEALTH_QUERY_KEY });
 			queryClient.setQueryData(HEALTH_QUERY_SETTINGS_KEY, newSettings);
 		},
 	};

diff --git a/site/src/api/queries/externalAuth.ts b/site/src/api/queries/externalAuth.ts
@@ -37,7 +37,9 @@ export const exchangeExternalAuthDevice = (
 		queryKey: ["external-auth", providerId, "device", deviceCode],
 		onSuccess: async () => {
 			// Force a refresh of the Git auth status.
-			await queryClient.invalidateQueries(["external-auth", providerId]);
+			await queryClient.invalidateQueries({
+				queryKey: ["external-auth", providerId],
+			});
 		},
 	};
 };
@@ -57,7 +59,9 @@ export const unlinkExternalAuths = (queryClient: QueryClient) => {
 	return {
 		mutationFn: API.unlinkExternalAuthProvider,
 		onSuccess: async () => {
-			await queryClient.invalidateQueries(["external-auth"]);
+			await queryClient.invalidateQueries({
+				queryKey: ["external-auth"],
+			});
 		},
 	};
 };
diff --git a/site/src/api/queries/groups.ts b/site/src/api/queries/groups.ts
@@ -117,10 +117,12 @@ export const createGroup = (queryClient: QueryClient, organization: string) => {
 		mutationFn: (request: CreateGroupRequest) =>
 			API.createGroup(organization, request),
 		onSuccess: async () => {
-			await queryClient.invalidateQueries(groupsQueryKey);
-			await queryClient.invalidateQueries(
-				getGroupsByOrganizationQueryKey(organization),
-			);
+			await queryClient.invalidateQueries({
+				queryKey: groupsQueryKey,
+			});
+			await queryClient.invalidateQueries({
+				queryKey: getGroupsByOrganizationQueryKey(organization),
+			});
 		},
 	};
 };
@@ -169,11 +171,13 @@ const invalidateGroup = (
 	groupId: string,
 ) =>
 	Promise.all([
-		queryClient.invalidateQueries(groupsQueryKey),
-		queryClient.invalidateQueries(
-			getGroupsByOrganizationQueryKey(organization),
-		),
-		queryClient.invalidateQueries(getGroupQueryKey(organization, groupId)),
+		queryClient.invalidateQueries({ queryKey: groupsQueryKey }),
+		queryClient.invalidateQueries({
+			queryKey: getGroupsByOrganizationQueryKey(organization),
+		}),
+		queryClient.invalidateQueries({
+			queryKey: getGroupQueryKey(organization, groupId),
+		}),
 	]);

 function sortGroupsByName<T extends Group>(

diff --git a/site/src/api/queries/idpsync.ts b/site/src/api/queries/idpsync.ts
@@ -9,7 +9,9 @@ export const patchOrganizationSyncSettings = (queryClient: QueryClient) => {
 		mutationFn: (request: OrganizationSyncSettings) =>
 			API.patchOrganizationIdpSyncSettings(request),
 		onSuccess: async () =>
-			await queryClient.invalidateQueries(getOrganizationIdpSyncSettingsKey()),
+			await queryClient.invalidateQueries({
+				queryKey: getOrganizationIdpSyncSettingsKey(),
+			}),
 	};
 };