feat: invalidate queries on user related actions

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

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import { useMutation } from '@apollo/client';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
+import { useQueryClient } from '@tanstack/react-query';
+
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import ConfirmationDialog from 'components/ConfirmationDialog';
@@ -17,9 +19,13 @@ function DeleteUserButton(props) {
   });
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
+
   const handleConfirm = React.useCallback(async () => {
     try {
       await deleteUser();
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
       setShowConfirmation(false);
       enqueueSnackbar(formatMessage('deleteUserButton.successfullyDeleted'), {
         variant: 'success',
@@ -31,6 +37,7 @@ function DeleteUserButton(props) {
       throw new Error('Failed while deleting!');
     }
   }, [deleteUser]);
+
   return (
     <>
       <IconButton

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

@@ -6,6 +6,7 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -29,6 +30,7 @@ export default function CreateUser() {
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+  const queryClient = useQueryClient();
 
   const handleUserCreation = async (userData) => {
     try {
@@ -44,7 +46,7 @@ export default function CreateUser() {
           },
         },
       });
-
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
       enqueueSnackbar(formatMessage('createUser.successfullyCreated'), {
         variant: 'success',
         persist: true,

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

@@ -7,6 +7,7 @@ import MuiTextField from '@mui/material/TextField';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Can from 'components/Can';
 import Container from 'components/Container';
@@ -34,6 +35,7 @@ export default function EditUser() {
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const handleUserUpdate = async (userDataToUpdate) => {
     try {
@@ -49,6 +51,8 @@ export default function EditUser() {
           },
         },
       });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'users'] });
+      queryClient.invalidateQueries({ queryKey: ['admin', 'user', userId] });
 
       enqueueSnackbar(formatMessage('editUser.successfullyUpdated'), {
         variant: 'success',