refactor: remove get-roles GQL query

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

@@ -4,6 +4,8 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
 import Can from 'components/Can';
 import ConfirmationDialog from 'components/ConfirmationDialog';
 import { DELETE_ROLE } from 'graphql/mutations/delete-role.ee';
@@ -12,15 +14,18 @@ import useFormatMessage from 'hooks/useFormatMessage';
 function DeleteRoleButton(props) {
   const { disabled, roleId } = props;
   const [showConfirmation, setShowConfirmation] = React.useState(false);
-  const [deleteRole] = useMutation(DELETE_ROLE, {
-    variables: { input: { id: roleId } },
-    refetchQueries: ['GetRoles'],
-  });
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
+
+  const [deleteRole] = useMutation(DELETE_ROLE, {
+    variables: { input: { id: roleId } },
+  });
+
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteRole();
+      queryClient.invalidateQueries({ queryKey: ['roles'] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteRoleButton.successfullyDeleted'), {
         variant: 'success',
@@ -31,7 +36,8 @@ function DeleteRoleButton(props) {
     } catch (error) {
       throw new Error('Failed while deleting!');
     }
-  }, [deleteRole]);
+  }, [deleteRole, enqueueSnackbar, formatMessage, queryClient]);
+
   return (
     <>
       <Can I="delete" a="Role" passThrough>