Update react-query to v5

package.json

@@ -55,6 +55,7 @@
     "@mui/icons-material": "^6.4.0",
     "@mui/lab": "^6.0.0-beta.21",
     "@mui/material": "^6.4.0",
+    "@tanstack/react-query": "^5.64.1",
     "@types/styled-components": "^5.1.34",
     "ansi-styles": "^6.2.1",
     "d3": "^7.9.0",
@@ -75,7 +76,6 @@
     "react-is": "^18.0.0",
     "react-lottie-player": "^2.1.0",
     "react-markdown": "^9.0.3",
-    "react-query": "^3.39.3",
     "react-router": "^7.1.1",
     "react-syntax-highlighter": "^15.6.1",
     "react-toastify": "^11.0.3",

ui/App.tsx

@@ -2,9 +2,9 @@ import {
   ThemeProvider as MuiThemeProvider,
   StyledEngineProvider,
 } from "@mui/material";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import qs from "query-string";
 import * as React from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import {
   Routes,
   Route,

ui/components/Sync/CheckboxActions.tsx

@@ -83,7 +83,7 @@ function CheckboxActions({ className, checked = [], rows = [] }: Props) {
       <SyncControls
         className={className}
         hideSyncOptions={noSource[location.pathname]}
-        syncLoading={sync.isLoading}
+        syncLoading={sync.isPending}
         syncDisabled={disableButtons}
         suspendDisabled={disableButtons}
         resumeDisabled={disableButtons}

ui/components/Sync/SuspendMessageModal.tsx

@@ -1,5 +1,5 @@
+import { UseMutationResult } from "@tanstack/react-query";
 import React, { Dispatch, SetStateAction } from "react";
-import { UseMutationResult } from "react-query/react";
 import styled from "styled-components";
 import { ToggleSuspendResourceResponse } from "../../lib/api/core/core.pb";
 import Button from "../Button";

ui/components/Sync/SyncActions.tsx

@@ -74,10 +74,10 @@ const SyncActions = ({
       <SyncControls
         className={className}
         hideSyncOptions={hideSyncOptions}
-        syncLoading={sync.isLoading}
+        syncLoading={sync.isPending}
         syncDisabled={suspended}
-        suspendDisabled={suspend.isLoading || suspended}
-        resumeDisabled={resume.isLoading || !suspended}
+        suspendDisabled={suspend.isPending || suspended}
+        resumeDisabled={resume.isPending || !suspended}
         customActions={customActions}
         onSyncClick={syncHandler}
         onSuspendClick={() =>

ui/components/__tests__/Footer.test.tsx

@@ -1,4 +1,4 @@
-import { screen } from "@testing-library/dom";
+import { screen, waitFor } from "@testing-library/dom";
 import { render } from "@testing-library/react";
 import "jest-canvas-mock";
 import "jest-styled-components";
@@ -40,6 +40,7 @@ describe("Footer", () => {
         );
       });
 
+      await waitFor(() => expect(screen.getByText("Weave GitOps:")));
       const footer = screen.getByRole("footer");
       expect(footer).toMatchSnapshot();
     });
@@ -57,6 +58,7 @@ describe("Footer", () => {
         );
       });
 
+      await waitFor(() => expect(screen.getByText("Weave GitOps:")));
       const footer = screen.getByRole("footer");
       expect(footer).toMatchSnapshot();
     });

ui/contexts/CoreClientContext.tsx

@@ -1,5 +1,5 @@
+import { useQuery } from "@tanstack/react-query";
 import * as React from "react";
-import { useQuery } from "react-query";
 import { Core, GetFeatureFlagsResponse } from "../lib/api/core/core.pb";
 import { TokenRefreshWrapper } from "../lib/requests";
 import { RequestError } from "../lib/types";
@@ -26,14 +26,12 @@ export const CoreClientContext =
   React.createContext<CoreClientContextType | null>(null);
 
 function FeatureFlags(api) {
-  const { data } = useQuery<GetFeatureFlagsResponse, RequestError>(
-    "feature_flags",
-    () => api.GetFeatureFlags({}),
-    {
-      staleTime: Infinity,
-      cacheTime: Infinity,
-    },
-  );
+  const { data } = useQuery<GetFeatureFlagsResponse, RequestError>({
+    queryKey: ["feature_flags"],
+    queryFn: () => api.GetFeatureFlags({}),
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
   return data?.flags;
 }
 

ui/contexts/__tests__/CoreClientContext.test.tsx

@@ -1,5 +1,5 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import * as React from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
 import renderer from "react-test-renderer";
 import { Core } from "../../lib/api/core/core.pb";
 import CoreClientContextProvider, {

ui/hooks/Policies.ts

@@ -1,5 +1,5 @@
+import { useQuery } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useQuery } from "react-query";
 
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import {
@@ -20,11 +20,11 @@ export function useListPolicies(
   },
 ) {
   const { api } = useContext(CoreClientContext);
-  return useQuery<ListPoliciesResponse, Error>(
-    [LIST_POLICIES_QUERY_KEY, req],
-    () => api.ListPolicies(req),
-    opts,
-  );
+  return useQuery<ListPoliciesResponse, Error>({
+    queryKey: [LIST_POLICIES_QUERY_KEY, req],
+    queryFn: () => api.ListPolicies(req),
+    ...opts,
+  });
 }
 const GET_POLICY_QUERY_KEY = "get-policy-details";
 
@@ -37,9 +37,9 @@ export function useGetPolicyDetails(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<GetPolicyResponse, Error>(
-    [GET_POLICY_QUERY_KEY, req],
-    () => api.GetPolicy(req),
-    opts,
-  );
+  return useQuery<GetPolicyResponse, Error>({
+    queryKey: [GET_POLICY_QUERY_KEY, req],
+    queryFn: () => api.GetPolicy(req),
+    ...opts,
+  });
 }

ui/hooks/automations.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useMutation, useQuery } from "react-query";
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import {
   ListObjectsResponse,
@@ -33,9 +33,9 @@ export function useListAutomations(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<Res, RequestError>(
-    ["automations", namespace],
-    () => {
+  return useQuery<Res, RequestError>({
+    queryKey: ["automations", namespace],
+    queryFn: () => {
       const p = [Kind.HelmRelease, Kind.Kustomization].map((kind) =>
         api
           .ListObjects({ namespace, kind })
@@ -67,8 +67,8 @@ export function useListAutomations(
         return final;
       });
     },
-    opts,
-  );
+    ...opts,
+  });
 }
 
 export function useSyncFluxObject(objs: ObjectRef[]) {
@@ -77,7 +77,9 @@ export function useSyncFluxObject(objs: ObjectRef[]) {
     SyncFluxObjectResponse,
     RequestError,
     SyncFluxObjectRequest
-  >(({ withSource }) => api.SyncFluxObject({ objects: objs, withSource }), {
+  >({
+    mutationFn: ({ withSource }) =>
+      api.SyncFluxObject({ objects: objs, withSource }),
     onSuccess: () => notifySuccess("Sync request successful!"),
     onError: (error) => notifyError(error.message),
   });

ui/hooks/events.ts

@@ -1,5 +1,5 @@
+import { useQuery } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useQuery } from "react-query";
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import { ListEventsResponse } from "../lib/api/core/core.pb";
 import { ObjectRef } from "../lib/api/core/types.pb";
@@ -15,12 +15,12 @@ export function useListEvents(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListEventsResponse, RequestError>(
-    ["events", obj],
-    () =>
+  return useQuery<ListEventsResponse, RequestError>({
+    queryKey: ["events", obj],
+    queryFn: () =>
       api.ListEvents({
         involvedObject: obj,
       }),
-    opts,
-  );
+    ...opts,
+  });
 }

ui/hooks/flux.ts

@@ -1,5 +1,5 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useMutation, useQuery, useQueryClient } from "react-query";
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import {
   ListFluxCrdsResponse,
@@ -28,21 +28,22 @@ export function useListFluxRuntimeObjects(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListFluxRuntimeObjectsResponse, RequestError>(
-    "flux_runtime_objects",
-    () => api.ListFluxRuntimeObjects({ namespace, clusterName }),
-    opts,
-  );
+  return useQuery<ListFluxRuntimeObjectsResponse, RequestError>({
+    queryKey: ["flux_runtime_objects"],
+    queryFn: () => api.ListFluxRuntimeObjects({ namespace, clusterName }),
+    ...opts,
+  });
 }
 
 export function useListFluxCrds(clusterName = DefaultCluster) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListFluxCrdsResponse, RequestError>(
-    "flux_crds",
-    () => api.ListFluxCrds({ clusterName }),
-    { retry: false, refetchInterval: 5000 },
-  );
+  return useQuery<ListFluxCrdsResponse, RequestError>({
+    queryKey: ["flux_crds"],
+    queryFn: () => api.ListFluxCrds({ clusterName }),
+    retry: false,
+    refetchInterval: 5000,
+  });
 }
 
 export function useListRuntimeObjects(
@@ -55,21 +56,22 @@ export function useListRuntimeObjects(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListRuntimeObjectsResponse, RequestError>(
-    "runtime_objects",
-    () => api.ListRuntimeObjects({ namespace, clusterName }),
-    opts,
-  );
+  return useQuery<ListRuntimeObjectsResponse, RequestError>({
+    queryKey: ["runtime_objects"],
+    queryFn: () => api.ListRuntimeObjects({ namespace, clusterName }),
+    ...opts,
+  });
 }
 
 export function useListRuntimeCrds(clusterName = DefaultCluster) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListFluxCrdsResponse, RequestError>(
-    "runtime_crds",
-    () => api.ListRuntimeCrds({ clusterName }),
-    { retry: false, refetchInterval: 5000 },
-  );
+  return useQuery<ListFluxCrdsResponse, RequestError>({
+    queryKey: ["runtime_crds"],
+    queryFn: () => api.ListRuntimeCrds({ clusterName }),
+    retry: false,
+    refetchInterval: 5000,
+  });
 }
 
 export function flattenChildren(children: FluxObject[]) {
@@ -116,11 +118,11 @@ export function useGetReconciledTree(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<FluxObject[], RequestError>(
-    ["reconciled_objects", { name, namespace, type, kinds }],
-    () => getChildren(api, name, namespace, type, kinds, clusterName),
-    opts,
-  );
+  return useQuery<FluxObject[], RequestError>({
+    queryKey: ["reconciled_objects", { name, namespace, type, kinds }],
+    queryFn: () => getChildren(api, name, namespace, type, kinds, clusterName),
+    ...opts,
+  });
 }
 
 export function useToggleSuspend(
@@ -129,18 +131,16 @@ export function useToggleSuspend(
 ) {
   const { api } = useContext(CoreClientContext);
   const queryClient = useQueryClient();
-  const mutation = useMutation<ToggleSuspendResourceResponse, RequestError>(
-    () => api.ToggleSuspendResource(req),
-    {
-      onSuccess: () => {
-        const suspend = req.suspend ? "Suspend" : "Resume";
-        notifySuccess(`${suspend} request successful!`);
-        return queryClient.invalidateQueries(type);
-      },
-      onError: (error) => {
-        notifyError(error.message);
-      },
+  const mutation = useMutation<ToggleSuspendResourceResponse, RequestError>({
+    mutationFn: () => api.ToggleSuspendResource(req),
+    onSuccess: () => {
+      const suspend = req.suspend ? "Suspend" : "Resume";
+      notifySuccess(`${suspend} request successful!`);
+      return queryClient.invalidateQueries({ queryKey: [type] });
     },
-  );
+    onError: (error) => {
+      notifyError(error.message);
+    },
+  });
   return mutation;
 }

ui/hooks/imageautomation.ts

@@ -1,5 +1,5 @@
+import { useQuery } from "@tanstack/react-query";
 import { useContext } from "react";
-import { useQuery } from "react-query";
 import { CoreClientContext } from "../contexts/CoreClientContext";
 import { ListObjectsResponse } from "../lib/api/core/core.pb";
 import { NoNamespace, ReactQueryOptions, RequestError } from "../lib/types";
@@ -15,15 +15,15 @@ export function useListImageAutomation(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<ListObjectsResponse, RequestError>(
-    ["image_automation", namespace, kind],
-    () =>
+  return useQuery<ListObjectsResponse, RequestError>({
+    queryKey: ["image_automation", namespace, kind],
+    queryFn: () =>
       api.ListObjects({ namespace, kind }).then((res) => {
         const providers = res.objects?.map((obj) => convertResponse(kind, obj));
         return { objects: providers, errors: res.errors };
       }),
-    opts,
-  );
+    ...opts,
+  });
 }
 
 export function useCheckCRDInstalled(
@@ -35,12 +35,12 @@ export function useCheckCRDInstalled(
 ) {
   const { api } = useContext(CoreClientContext);
 
-  return useQuery<boolean, RequestError>(
-    ["image_automation_crd_available", name],
-    () =>
+  return useQuery<boolean, RequestError>({
+    queryKey: ["image_automation_crd_available", name],
+    queryFn: () =>
       api.IsCRDAvailable({ name }).then(({ clusters }) => {
         return Object.values(clusters).some((r) => r === true);
       }),
-    opts,
-  );
+    ...opts,
+  });
 }