refactor: rewrite useAuthClients with RQ

packages/backend/src/graphql/queries/get-app-auth-clients.ee.js

@@ -1,33 +0,0 @@
-import AppConfig from '../../models/app-config.js';
-
-const getAppAuthClients = async (_parent, params, context) => {
-  let canSeeAllClients = false;
-  try {
-    context.currentUser.can('read', 'App');
-
-    canSeeAllClients = true;
-  } catch {
-    // void
-  }
-
-  const appConfig = await AppConfig.query()
-    .findOne({
-      key: params.appKey,
-    })
-    .throwIfNotFound();
-
-  const appAuthClients = appConfig
-    .$relatedQuery('appAuthClients')
-    .where({ active: params.active })
-    .skipUndefined();
-
-  if (!canSeeAllClients) {
-    appAuthClients.where({
-      active: true,
-    });
-  }
-
-  return await appAuthClients;
-};
-
-export default getAppAuthClients;

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,16 +10,18 @@ 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)}
@@ -27,7 +29,8 @@ function AdminApplicationAuthClients(props) {
       />
     );
   }
-  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/graphql/queries/get-app-auth-clients.ee.js

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_AUTH_CLIENTS = gql`
-  query GetAppAuthClients($appKey: String!, $active: Boolean) {
-    getAppAuthClients(appKey: $appKey, active: $active) {
-      id
-      appConfigId
-      name
-      active
-    }
-  }
-`;

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.ee.js

@@ -1,25 +0,0 @@
-import { useLazyQuery } from '@apollo/client';
-import * as React from 'react';
-import { GET_APP_AUTH_CLIENTS } from 'graphql/queries/get-app-auth-clients.ee';
-export default function useAppAuthClient({ appKey, active }) {
-  const [getAppAuthClients, { data, loading }] = useLazyQuery(
-    GET_APP_AUTH_CLIENTS,
-    {
-      context: { autoSnackbar: false },
-    },
-  );
-  const appAuthClients = data?.getAppAuthClients;
-  React.useEffect(
-    function fetchUponAppKey() {
-      if (!appKey) return;
-      getAppAuthClients({
-        variables: { appKey, ...(typeof active === 'boolean' && { active }) },
-      });
-    },
-    [appKey],
-  );
-  return {
-    appAuthClients,
-    loading,
-  };
-}

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;
+}