refactor: rewrite useAuthClients with RQ

packages/backend/src/graphql/query-resolvers.js

@@ -1,6 +1,5 @@
 import getApp from './queries/get-app.js';
 import getAppAuthClient from './queries/get-app-auth-client.ee.js';
-import getAppAuthClients from './queries/get-app-auth-clients.ee.js';
 import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
 import getDynamicData from './queries/get-dynamic-data.js';
@@ -11,7 +10,6 @@ import testConnection from './queries/test-connection.js';
 const queryResolvers = {
   getApp,
   getAppAuthClient,
-  getAppAuthClients,
   getBillingAndUsage,
   getConnectedApps,
   getDynamicData,

packages/backend/src/graphql/schema.graphql

@@ -1,7 +1,6 @@
 type Query {
   getApp(key: String!): App
   getAppAuthClient(id: String!): AppAuthClient
-  getAppAuthClients(appKey: String!, active: Boolean): [AppAuthClient]
   getConnectedApps(name: String): [App]
   testConnection(id: String!): Connection
   getFlow(id: String!): Flow

packages/web/src/components/AdminApplicationAuthClients/index.jsx

@@ -10,24 +10,27 @@ import Chip from '@mui/material/Chip';
 import Button from '@mui/material/Button';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAdminAppAuthClients from 'hooks/useAdminAppAuthClients';
 import NoResultFound from 'components/NoResultFound';
 
 function AdminApplicationAuthClients(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { appAuthClients, loading } = useAppAuthClients({ appKey });
-  if (loading)
+  const { data: appAuthClients, isLoading } = useAdminAppAuthClients(appKey);
+
+  if (isLoading)
     return <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />;
-  if (!appAuthClients?.length) {
+
+  if (!appAuthClients?.data.length) {
     return (
       <NoResultFound
         to={URLS.ADMIN_APP_AUTH_CLIENTS_CREATE(appKey)}
         text={formatMessage('adminAppsAuthClients.noAuthClients')}
       />
     );
   }
-  const sortedAuthClients = appAuthClients.slice().sort((a, b) => {
+
+  const sortedAuthClients = appAuthClients.data.slice().sort((a, b) => {
     if (a.id < b.id) {
       return -1;
     }
@@ -36,6 +39,7 @@ function AdminApplicationAuthClients(props) {
     }
     return 0;
   });
+
   return (
     <div>
       {sortedAuthClients.map((client) => (

packages/web/src/components/AppAuthClientsDialog/index.ee.jsx

@@ -6,29 +6,33 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import * as React from 'react';
-import useAppAuthClients from 'hooks/useAppAuthClients.ee';
+import useAppAuthClients from 'hooks/useAppAuthClients';
 import useFormatMessage from 'hooks/useFormatMessage';
 
 function AppAuthClientsDialog(props) {
   const { appKey, onClientClick, onClose } = props;
-  const { appAuthClients } = useAppAuthClients({ appKey, active: true });
+  const { data: appAuthClients } = useAppAuthClients(appKey);
+
   const formatMessage = useFormatMessage();
+
   React.useEffect(
     function autoAuthenticateSingleClient() {
-      if (appAuthClients?.length === 1) {
-        onClientClick(appAuthClients[0].id);
+      if (appAuthClients?.data.length === 1) {
+        onClientClick(appAuthClients.data[0].id);
       }
     },
-    [appAuthClients],
+    [appAuthClients?.data],
   );
-  if (!appAuthClients?.length || appAuthClients?.length === 1)
+
+  if (!appAuthClients?.data.length || appAuthClients?.data.length === 1)
     return <React.Fragment />;
+
   return (
     <Dialog onClose={onClose} open={true}>
       <DialogTitle>{formatMessage('appAuthClientsDialog.title')}</DialogTitle>
 
       <List sx={{ pt: 0 }}>
-        {appAuthClients.map((appAuthClient) => (
+        {appAuthClients.data.map((appAuthClient) => (
           <ListItem disableGutters key={appAuthClient.id}>
             <ListItemButton onClick={() => onClientClick(appAuthClient.id)}>
               <ListItemText primary={appAuthClient.name} />

packages/web/src/hooks/useAdminAppAuthClients.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAdminAppAuthClient(appKey) {
+  const query = useQuery({
+    queryKey: ['admin', 'apps', appKey, 'auth-clients'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/apps/${appKey}/auth-clients`, {
+        signal,
+      });
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}

packages/web/src/hooks/useAppAuthClients.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAppAuthClients(appKey) {
+  const query = useQuery({
+    queryKey: ['apps', appKey, 'auth-clients'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/auth-clients`, {
+        signal,
+      });
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}