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

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(
-    useMemo(
+  const queries = useQueries({
+    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(
-    subscriptions.map((subscription) => ({
+  const queries = useQueries({
+    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(
-    subscriptions.map((subscription) => ({
+  const queries = useQueries({
+    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';