refactor: rewrite useUser with RQ

packages/backend/src/graphql/queries/get-user.js

@@ -1,17 +0,0 @@
-import User from '../../models/user.js';
-
-const getUser = async (_parent, params, context) => {
-  context.currentUser.can('read', 'User');
-
-  return await User.query()
-    .leftJoinRelated({
-      role: true,
-    })
-    .withGraphFetched({
-      role: true,
-    })
-    .findById(params.id)
-    .throwIfNotFound();
-};
-
-export default getUser;

packages/backend/src/graphql/queries/get-user.test.js

@@ -1,146 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import request from 'supertest';
-import app from '../../app';
-import createAuthTokenByUserId from '../../helpers/create-auth-token-by-user-id';
-import Crypto from 'crypto';
-import { createRole } from '../../../test/factories/role';
-import { createPermission } from '../../../test/factories/permission';
-import { createUser } from '../../../test/factories/user';
-
-describe('graphQL getUser query', () => {
-  describe('and without permissions', () => {
-    it('should throw not authorized error', async () => {
-      const userWithoutPermissions = await createUser();
-      const anotherUser = await createUser();
-
-      const query = `
-          query {
-            getUser(id: "${anotherUser.id}") {
-              id
-              email
-            }
-          }
-        `;
-
-      const token = createAuthTokenByUserId(userWithoutPermissions.id);
-
-      const response = await request(app)
-        .post('/graphql')
-        .set('Authorization', token)
-        .send({ query })
-        .expect(200);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual('Not authorized!');
-    });
-  });
-
-  describe('and correct permissions', () => {
-    let role, currentUser, anotherUser, token, requestObject;
-
-    beforeEach(async () => {
-      role = await createRole({
-        key: 'sample',
-        name: 'sample',
-      });
-
-      await createPermission({
-        action: 'read',
-        subject: 'User',
-        roleId: role.id,
-      });
-
-      currentUser = await createUser({
-        roleId: role.id,
-      });
-
-      anotherUser = await createUser({
-        roleId: role.id,
-      });
-
-      token = createAuthTokenByUserId(currentUser.id);
-      requestObject = request(app).post('/graphql').set('Authorization', token);
-    });
-
-    it('should return user data for a valid user id', async () => {
-      const query = `
-          query {
-            getUser(id: "${anotherUser.id}") {
-              id
-              email
-              fullName
-              email
-              createdAt
-              updatedAt
-              role {
-                id
-                name
-              }
-            }
-          }
-        `;
-
-      const response = await requestObject.send({ query }).expect(200);
-
-      const expectedResponsePayload = {
-        data: {
-          getUser: {
-            createdAt: anotherUser.createdAt.getTime().toString(),
-            email: anotherUser.email,
-            fullName: anotherUser.fullName,
-            id: anotherUser.id,
-            role: { id: role.id, name: role.name },
-            updatedAt: anotherUser.updatedAt.getTime().toString(),
-          },
-        },
-      };
-
-      expect(response.body).toEqual(expectedResponsePayload);
-    });
-
-    it('should not return user password for a valid user id', async () => {
-      const query = `
-          query {
-            getUser(id: "${anotherUser.id}") {
-              id
-              email
-              password
-            }
-          }
-        `;
-
-      const response = await requestObject.send({ query }).expect(400);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual(
-        'Cannot query field "password" on type "User".'
-      );
-    });
-
-    it('should return not found for invalid user id', async () => {
-      const invalidUserId = Crypto.randomUUID();
-
-      const query = `
-          query {
-            getUser(id: "${invalidUserId}") {
-              id
-              email
-              fullName
-              email
-              createdAt
-              updatedAt
-              role {
-                id
-                name
-              }
-            }
-          }
-        `;
-
-      const response = await requestObject.send({ query }).expect(200);
-
-      expect(response.body.errors).toBeDefined();
-      expect(response.body.errors[0].message).toEqual('NotFoundError');
-    });
-  });
-});

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

@@ -15,7 +15,6 @@ import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-ro
 import getSamlAuthProvider from './queries/get-saml-auth-provider.ee.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import getTrialStatus from './queries/get-trial-status.ee.js';
-import getUser from './queries/get-user.js';
 import getUsers from './queries/get-users.js';
 import listSamlAuthProviders from './queries/list-saml-auth-providers.ee.js';
 import testConnection from './queries/test-connection.js';
@@ -38,7 +37,6 @@ const queryResolvers = {
   getSamlAuthProviderRoleMappings,
   getStepWithTestExecutions,
   getTrialStatus,
-  getUser,
   getUsers,
   listSamlAuthProviders,
   testConnection,

packages/backend/src/graphql/schema.graphql

@@ -31,7 +31,6 @@ type Query {
   getSamlAuthProvider: SamlAuthProvider
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getTrialStatus: GetTrialStatus
-  getUser(id: String!): User
   getUsers(limit: Int!, offset: Int!): UserConnection
   listSamlAuthProviders: [ListSamlAuthProvider]
 }

packages/web/src/graphql/queries/get-user.js

@@ -1,18 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_USER = gql`
-  query GetUser($id: String!) {
-    getUser(id: $id) {
-      id
-      fullName
-      email
-      role {
-        id
-        key
-        name
-        isAdmin
-      }
-      createdAt
-      updatedAt
-    }
-  }
-`;

packages/web/src/hooks/useUser.js

@@ -1,19 +1,17 @@
-import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
-import { GET_USER } from 'graphql/queries/get-user';
-export default function useUser(userId) {
-  const [getUser, { data, loading }] = useLazyQuery(GET_USER);
-  React.useEffect(() => {
-    if (userId) {
-      getUser({
-        variables: {
-          id: userId,
-        },
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUser({ userId }) {
+  const query = useQuery({
+    queryKey: ['user', userId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/admin/users/${userId}`, {
+        signal,
       });
-    }
-  }, [userId]);
-  return {
-    user: data?.getUser,
-    loading,
-  };
+      return data;
+    },
+    enabled: !!userId,
+  });
+
+  return query;
 }

packages/web/src/pages/EditUser/index.jsx

@@ -28,7 +28,8 @@ export default function EditUser() {
   const formatMessage = useFormatMessage();
   const [updateUser, { loading }] = useMutation(UPDATE_USER);
   const { userId } = useParams();
-  const { user, loading: userLoading } = useUser(userId);
+  const { data: userData, loading: isUserLoading } = useUser({ userId });
+  const user = userData?.data;
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
@@ -73,7 +74,7 @@ export default function EditUser() {
         </Grid>
 
         <Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
-          {userLoading && (
+          {isUserLoading && (
             <Stack direction="column" gap={2}>
               <Skeleton variant="rounded" height={55} />
               <Skeleton variant="rounded" height={55} />
@@ -82,7 +83,7 @@ export default function EditUser() {
             </Stack>
           )}
 
-          {!userLoading && (
+          {!isUserLoading && (
             <Form defaultValues={user} onSubmit={handleUserUpdate}>
               <Stack direction="column" gap={2}>
                 <TextField