chore(deps): upgrade react-query to v4 [EE-6638] (#11041)

.storybook/preview.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { pushStateLocationPlugin, UIRouter } from '@uirouter/react';
 import { initialize as initMSW, mswLoader } from 'msw-storybook-addon';
 import { handlers } from '../app/setup-tests/server-handlers';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 initMSW(
   {

app/portainer/tags/queries.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import {
   mutationOptions,

app/portainer/users/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { TeamRole, TeamMembership } from '@/react/portainer/users/teams/types';
 import { useCurrentUser, useIsEdgeAdmin } from '@/react/hooks/useUser';

app/portainer/users/queries/useLoadCurrentUser.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/portainer/users/queries/useUser.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/react-tools/react-query.ts

@@ -5,7 +5,7 @@ import {
   QueryClient,
   QueryKey,
   QueryOptions,
-} from 'react-query';
+} from '@tanstack/react-query';
 
 import { notifyError } from '@/portainer/services/notifications';
 

app/react-tools/withControlledInput.tsx

@@ -99,7 +99,11 @@ export function withControlledInput<T>(
             (value: T[keyof T]) => {
               // update the state with the value coming from WrappedComponent
               setControlledValues(
-                (c) => ({ ...c, [valueKey]: value }) as KeyRecord<T>
+                (c) =>
+                  ({
+                    ...c,
+                    [valueKey]: value,
+                  }) as KeyRecord<T>
               );
 
               // call the bound handler func to update the value outside of React

app/react-tools/withReactQuery.tsx

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { QueryClientProvider } from 'react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 
 import { queryClient as defaultQueryClient } from './react-query';
 

app/react/azure/container-instances/CreateView/useCreateInstanceMutation.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { createContainerGroup } from '@/react/azure/services/container-groups.service';
 import { queryKeys } from '@/react/azure/queries/query-keys';

app/react/azure/container-instances/ItemView/ItemView.tsx

@@ -1,5 +1,5 @@
 import { useCurrentStateAndParams } from '@uirouter/react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';

app/react/azure/container-instances/ListView/ListView.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { deleteContainerGroup } from '@/react/azure/services/container-groups.service';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';

app/react/azure/queries/useContainerGroup.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { withError } from '@/react-tools/react-query';

app/react/azure/queries/useContainerGroups.ts

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import { useMemo } from 'react';
-import { useQueries } from 'react-query';
+import { useQueries } from '@tanstack/react-query';
 
 import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
@@ -16,8 +16,8 @@ export function useContainerGroups(
   subscriptions: Subscription[] = [],
   enabled?: boolean
 ) {
-  const queries = useQueries(
+  const queries = useQueries({
-    useMemo(
+    queries: useMemo(
       () =>
         subscriptions.map((subscription) => ({
           queryKey: queryKeys.containerGroups(
@@ -30,8 +30,8 @@ export function useContainerGroups(
           enabled,
         })),
       [subscriptions, enabled, environmentId]
-    )
+    ),
-  );
+  });
 
   return useMemo(
     () => ({

app/react/azure/queries/useProvider.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useQueries } from 'react-query';
+import { useQueries } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
@@ -14,9 +14,10 @@ export function useProvider(
   environmentId: EnvironmentId,
   subscriptions: Subscription[] = []
 ) {
-  const queries = useQueries(
+  const queries = useQueries({
-    subscriptions.map((subscription) => ({
+    queries: subscriptions.map((subscription) => ({
       queryKey: queryKeys.provider(environmentId, subscription.subscriptionId),
+
       queryFn: async () => {
         const provider = await getContainerInstanceProvider(
           environmentId,
@@ -24,9 +25,10 @@ export function useProvider(
         );
         return [subscription.subscriptionId, provider] as const;
       },
+
       ...withError('Unable to retrieve Azure providers'),
-    }))
+    })),
-  );
+  });
 
   return {
     providers: Object.fromEntries(

app/react/azure/queries/useResourceGroup.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/azure/queries/useResourceGroups.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { useQueries } from 'react-query';
+import { useQueries } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';
@@ -15,12 +15,13 @@ export function useResourceGroups(
   environmentId: EnvironmentId,
   subscriptions: Subscription[] = []
 ) {
-  const queries = useQueries(
+  const queries = useQueries({
-    subscriptions.map((subscription) => ({
+    queries: subscriptions.map((subscription) => ({
       queryKey: queryKeys.resourceGroups(
         environmentId,
         subscription.subscriptionId
       ),
+
       queryFn: async () => {
         const groups = await getResourceGroups(
           environmentId,
@@ -28,9 +29,10 @@ export function useResourceGroups(
         );
         return [subscription.subscriptionId, groups] as const;
       },
+
       ...withError('Unable to retrieve Azure resource groups'),
-    }))
+    })),
-  );
+  });
 
   return {
     resourceGroups: Object.fromEntries(

app/react/azure/queries/useSubscription.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/azure/queries/useSubscriptions.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/common/stacks/ItemView/StackContainersDatatable.tsx

@@ -86,7 +86,7 @@ export function StackContainersDatatable({ environment, stackName }: Props) {
             </>
           )}
           dataset={containersQuery.data || []}
-          isLoading={containersQuery.isLoading}
+          isLoading={!containersQuery.data}
           emptyContentLabel="No containers found"
         />
       </TableSettingsProvider>

app/react/common/stacks/queries/useCreateStack/useCreateStack.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Pair } from '@/react/portainer/settings/types';

app/react/common/stacks/queries/useStacks.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/common/stacks/stack.service.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/react/components/HubspotForm.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useRef } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 let globalId = 0;
 

app/react/components/ImageConfigFieldset/RateLimits.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/components/ReactQueryDevtoolsWrapper.tsx

@@ -1,4 +1,4 @@
-import { ReactQueryDevtools } from 'react-query/devtools';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 export function ReactQueryDevtoolsWrapper() {
   const showReactQueryDevtools =

app/react/components/datatables/Datatable.tsx

@@ -110,7 +110,7 @@ export function Datatable<D extends DefaultType>({
   const allColumns = useMemo(
     () =>
       _.compact([!disableSelect && createSelectColumn<D>(dataCy), ...columns]),
-    [disableSelect, columns]
+    [disableSelect, dataCy, columns]
   );
 
   const tableInstance = useReactTable<D>(

app/react/docker/agent/queries/useAgentNodes.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/agent/queries/useApiVersion.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, {
   isAxiosError,

app/react/docker/components/ImageStatus/useImageNotification.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios from '@/portainer/services/axios';

app/react/docker/containers/CreateView/ResourcesTab/EditResourceForm.tsx

@@ -1,5 +1,5 @@
 import { Formik } from 'formik';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { useCurrentStateAndParams } from '@uirouter/react';
 import { useState } from 'react';
 import { FormikHelpers } from 'formik/dist/types';

app/react/docker/containers/CreateView/useCreateMutation.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { RawAxiosRequestHeaders } from 'axios';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/containers/queries/container.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import {
   ContainerConfig,
   ContainerState,

app/react/docker/containers/queries/containers.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, {

app/react/docker/containers/queries/gpus.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/containers/queries/useContainerInspect.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/images/queries/useImages.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/networks/ItemView/ItemView.tsx

@@ -1,5 +1,5 @@
 import { useRouter, useCurrentStateAndParams } from '@uirouter/react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { AccessControlPanel } from '@/react/portainer/access-control/AccessControlPanel/AccessControlPanel';

app/react/docker/networks/ItemView/NetworkDetailsTable.test.tsx

@@ -1,5 +1,5 @@
 import { HttpResponse, http } from 'msw';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { UserViewModel } from '@/portainer/models/user';
 import { server } from '@/setup-tests/server';
@@ -38,19 +38,17 @@ test('Network details values should be visible', async () => {
 
 test(`System networks shouldn't show a delete button`, async () => {
   const systemNetwork = getNetwork('bridge');
-  const { queryByText } = await renderComponent(true, systemNetwork);
+  await renderComponent(true, systemNetwork);
 
-  const deleteButton = queryByText('Delete this network');
+  expect(screen.queryByText('Delete this network')).toBeNull();
-  expect(deleteButton).toBeNull();
 });
 
 test('Non system networks should have a delete button', async () => {
   const nonSystemNetwork = getNetwork('non system network');
 
-  const { queryByText } = await renderComponent(true, nonSystemNetwork);
+  await renderComponent(true, nonSystemNetwork);
 
-  const button = queryByText('Delete this network');
+  await expect(screen.findByText('Delete this network')).resolves.toBeVisible();
-  expect(button).toBeVisible();
 });
 
 async function renderComponent(isAdmin: boolean, network: DockerNetwork) {

app/react/docker/networks/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import {

app/react/docker/networks/queries/useConnectContainer.ts

@@ -1,6 +1,6 @@
 import { EndpointSettings } from 'docker-types/generated/1.41';
 import { RawAxiosRequestHeaders } from 'axios';
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/networks/queries/useNetworks.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/proxy/queries/images/useImages.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { ImageSummary } from 'docker-types/generated/1.41';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/proxy/queries/nodes/useNodes.ts

@@ -1,5 +1,5 @@
 import { Node } from 'docker-types/generated/1.41';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/proxy/queries/useInfo.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { SystemInfo } from 'docker-types/generated/1.41';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/proxy/queries/useServicePlugins.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import {
   Plugin,
   PluginInterfaceType,

app/react/docker/proxy/queries/useSwarm.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Swarm } from 'docker-types/generated/1.41';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/proxy/queries/useVersion.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { SystemVersion } from 'docker-types/generated/1.41';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/services/ListView/ServicesDatatable/useForceUpdateServicesMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import { withError } from '@/react-tools/react-query';

app/react/docker/services/ListView/ServicesDatatable/useRemoveServicesMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/docker/services/queries/useUpdateServiceMutation.ts

@@ -3,7 +3,7 @@ import {
   ServiceSpec,
   ServiceUpdateResponse,
 } from 'docker-types/generated/1.41';
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/stacks/ListView/StacksDatatable/columns/StackImageStatus.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Loader2 } from 'lucide-react';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/docker/volumes/queries/useVolumes.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { Volume } from 'docker-types/generated/1.41';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-devices/WaitingRoomView/queries.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EdgeTypes, EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-devices/open-amt/useAMTDevices.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { withError } from '@/react-tools/react-query';

app/react/edge/edge-devices/open-amt/useActivateDevicesMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import { mutationOptions, withError } from '@/react-tools/react-query';

app/react/edge/edge-devices/open-amt/useExecuteAMTDeviceActionMutation.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/react/edge/edge-groups/ListView/useDeleteEdgeGroupMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-groups/queries/useCreateEdgeGroupMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { TagId } from '@/portainer/tags/types';

app/react/edge/edge-groups/queries/useEdgeGroups.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import {

app/react/edge/edge-jobs/ListView/useDeleteEdgeJobsMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-jobs/queries/useEdgeJobs.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 

app/react/edge/edge-stacks/ItemView/EditEdgeStackForm/GitForm/useUpdateEdgeStackGitMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { mutationOptions, withError } from '@/react-tools/react-query';

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/useCollectLogsMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/useDeleteLogsMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/useDownloadLogsMutation.ts

@@ -1,5 +1,5 @@
 import { saveAs } from 'file-saver';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/ItemView/EnvironmentsDatatable/useLogsStatus.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/ListView/EdgeStacksDatatable/useDeleteEdgeStacksMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/ListView/ListView.tsx

@@ -1,4 +1,4 @@
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { PageHeader } from '@@/PageHeader';
 

app/react/edge/edge-stacks/queries/useCreateEdgeStack/useCreateEdgeStack.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 import { RegistryId } from '@/react/portainer/registries/types/registry';

app/react/edge/edge-stacks/queries/useEdgeStack.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/queries/useEdgeStacks.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { withError } from '@/react-tools/react-query';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/edge/edge-stacks/queries/useParseRegistries.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { withError } from '@/react-tools/react-query';
 import { RegistryId } from '@/react/portainer/registries/types/registry';

app/react/kubernetes/applications/CreateView/application-services/ingress/AppIngressPathForm.tsx

@@ -1,6 +1,6 @@
 import { RefreshCw, Trash2 } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 import { FormikErrors } from 'formik';
 
 import { Ingress } from '@/react/kubernetes/ingresses/types';

app/react/kubernetes/applications/CreateView/application-services/kubeServicesValidation.ts

@@ -163,8 +163,10 @@ export function kubeServicesValidation(
                   .flatMap((formService) => formService.Ports)
                   .map((formServicePorts) => formServicePorts.nodePort);
                 return (
-                  !clusterNodePortsWithoutFormServices.includes(nodePort) && // node port is not in the cluster services that aren't in the application form
+                  // and the node port is not in the current form, excluding the current service
-                  !formNodePortsWithoutCurrentService.includes(nodePort) // and the node port is not in the current form, excluding the current service
+                  // node port is not in the cluster services that aren't in the application form
+                  !clusterNodePortsWithoutFormServices.includes(nodePort) &&
+                  !formNodePortsWithoutCurrentService.includes(nodePort)
                 );
               }
             )

app/react/kubernetes/applications/DetailsView/useNamespaceEventsQuery.ts

@@ -1,5 +1,5 @@
 import { EventList } from 'kubernetes-types/core/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/applications/application.queries.ts

@@ -1,4 +1,4 @@
-import { UseQueryResult, useMutation, useQuery } from 'react-query';
+import { UseQueryResult, useMutation, useQuery } from '@tanstack/react-query';
 import { Pod } from 'kubernetes-types/core/v1';
 
 import { queryClient, withError } from '@/react-tools/react-query';
@@ -18,18 +18,15 @@ import { getNamespaceHorizontalPodAutoscalers } from './autoscaling.service';
 import { applicationIsKind, matchLabelsToLabelSelectorValue } from './utils';
 
 const queryKeys = {
-  applicationsForCluster: (environmentId: EnvironmentId) => [
+  applicationsForCluster: (environmentId: EnvironmentId) =>
-    'environments',
+    ['environments', environmentId, 'kubernetes', 'applications'] as const,
-    environmentId,
-    'kubernetes',
-    'applications',
-  ],
   application: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string,
     yaml?: boolean
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -37,13 +34,14 @@ const queryKeys = {
       namespace,
       name,
       yaml,
-  ],
+    ] as const,
   applicationRevisions: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string,
     labelSelector?: string
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -52,12 +50,13 @@ const queryKeys = {
       name,
       'revisions',
       labelSelector,
-  ],
+    ] as const,
   applicationServices: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -65,12 +64,13 @@ const queryKeys = {
       namespace,
       name,
       'services',
-  ],
+    ] as const,
   ingressesForApplication: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -78,12 +78,13 @@ const queryKeys = {
       namespace,
       name,
       'ingresses',
-  ],
+    ] as const,
   applicationHorizontalPodAutoscalers: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -91,12 +92,13 @@ const queryKeys = {
       namespace,
       name,
       'horizontalpodautoscalers',
-  ],
+    ] as const,
   applicationPods: (
     environmentId: EnvironmentId,
     namespace: string,
     name: string
-  ) => [
+  ) =>
+    [
       'environments',
       environmentId,
       'kubernetes',
@@ -104,17 +106,17 @@ const queryKeys = {
       namespace,
       name,
       'pods',
-  ],
+    ] as const,
 };
 
 // useQuery to get a list of all applications from an array of namespaces
 export function useApplicationsQuery(
-  environemtId: EnvironmentId,
+  environmentId: EnvironmentId,
   namespaces?: string[]
 ) {
   return useQuery(
-    queryKeys.applicationsForCluster(environemtId),
+    queryKeys.applicationsForCluster(environmentId),
-    () => getApplicationsForCluster(environemtId, namespaces),
+    () => getApplicationsForCluster(environmentId, namespaces),
     {
       ...withError('Unable to retrieve applications'),
       enabled: !!namespaces?.length,

app/react/kubernetes/applications/autoscaling.service.ts

@@ -2,7 +2,7 @@ import {
   HorizontalPodAutoscaler,
   HorizontalPodAutoscalerList,
 } from 'kubernetes-types/autoscaling/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/handleSubmitConfigureCluster.ts

@@ -1,7 +1,7 @@
 import { FormikHelpers } from 'formik';
 import { StorageClass } from 'kubernetes-types/storage/v1';
 import { compare } from 'fast-json-patch';
-import { UseMutationResult } from 'react-query';
+import { UseMutationResult } from '@tanstack/react-query';
 
 import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 import { UpdateEnvironmentPayload } from '@/react/portainer/environments/queries/useUpdateEnvironmentMutation';

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useConfigureClusterMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Operation } from 'fast-json-patch';
 import _ from 'lodash';
 

app/react/kubernetes/cluster/ConfigureView/ConfigureForm/useStorageClasses.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { StorageClass, StorageClassList } from 'kubernetes-types/storage/v1';
 
 import axios from '@/portainer/services/axios';

app/react/kubernetes/cluster/HomeView/nodes.service.ts

@@ -1,5 +1,5 @@
 import { NodeList, Node } from 'kubernetes-types/core/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/kubernetes/cluster/getIsRBACEnabled.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/useIngressControllerClassMap.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import PortainerError from '@/portainer/error';

app/react/kubernetes/cluster/ingressClass/useIngressControllerClassMap.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import axios, { parseAxiosError } from '@/portainer/services/axios';

app/react/kubernetes/cluster/kubernetesEndpoint.service.ts

@@ -1,5 +1,5 @@
 import { EndpointsList } from 'kubernetes-types/core/v1';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios from '@/portainer/services/axios';
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/kubernetes/configs/configmap.service.ts

@@ -1,5 +1,5 @@
 import { ConfigMap, ConfigMapList } from 'kubernetes-types/core/v1';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryClient, withError } from '@/react-tools/react-query';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/configs/secret.service.ts

@@ -1,5 +1,5 @@
 import { Secret, SecretList } from 'kubernetes-types/core/v1';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { queryClient, withError } from '@/react-tools/react-query';
 import axios from '@/portainer/services/axios';

app/react/kubernetes/dashboard/DashboardView.tsx

@@ -1,5 +1,5 @@
 import { Box, Database, FileCode, Layers, Lock, Shuffle } from 'lucide-react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import Route from '@/assets/ico/route.svg?c';

app/react/kubernetes/ingresses/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import {

app/react/kubernetes/namespaces/CreateView/queries/useCreateNamespaceMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { withError } from '@/react-tools/react-query';

app/react/kubernetes/namespaces/CreateView/queries/useResourceLimitsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/namespaces/queries/useNamespaceQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import axios, { parseAxiosError } from '@/portainer/services/axios';
 import { notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/namespaces/queries/useNamespacesQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { withError } from '@/react-tools/react-query';

app/react/kubernetes/networks/services/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { error as notifyError } from '@/portainer/services/notifications';

app/react/kubernetes/queries/useGetMetricsMutation.ts

@@ -1,4 +1,4 @@
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import { getMetricsForAllNodes } from '../services/service';
 

app/react/kubernetes/services/service.ts

@@ -1,4 +1,4 @@
-import { useMutation, useQuery, useQueryClient } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { compact } from 'lodash';
 import { ServiceList } from 'kubernetes-types/core/v1';
 

app/react/kubernetes/volumes/usePVCsQuery.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { PersistentVolumeClaimList } from 'kubernetes-types/core/v1';
 
 import { EnvironmentId } from '@/react/portainer/environments/types';

app/react/portainer/HomeView/BackupFailedPanel.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { error as notifyError } from '@/portainer/services/notifications';
 import { getBackupStatus } from '@/portainer/services/api/backup.service';

app/react/portainer/HomeView/MotdPanel.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import _ from 'lodash';
 
 import { useUIState } from '@/react/hooks/useUIState';
@@ -43,7 +43,7 @@ export function MotdPanel() {
 }
 
 function useMotd() {
-  const { data } = useQuery('motd', () => getMotd());
+  const { data } = useQuery(['motd'], () => getMotd());
   return data;
 }
 

app/react/portainer/access-control/AccessControlPanel/AccessControlPanelForm.tsx

@@ -1,6 +1,6 @@
 import { Form, Formik } from 'formik';
 import clsx from 'clsx';
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { object } from 'yup';
 
 import { useCurrentUser, useIsEdgeAdmin } from '@/react/hooks/useUser';