Need to limit useQuery from refetching after a mutation

[jinsley8]

I have a form that loads data for the current item on page load, and deleting the item redirects to the previous page.

However, invalidating the query on deletion (in the OnSuccess) causes a 404 error before the redirect due to the original query refetching.

I'm currently invalidating the data after the redirect to avoid this. Should I keep it this way or is there a way to invalidate before the redirect without causing the refetch?

Or should I leave the old data in the cache queryKey: ['taskAreas', 'single', data.taskArea.id] and only invalidate queryKey: ['taskAreas', 'all'] which loads on the page the redirect goes to?

const UpdateTaskAreaForm = ({ taskAreaId }: UpdateTaskAreaFormProps) => {
    const router = useRouter();
    const queryClient = useQueryClient();

    // THIS IS THE useQUERY THAT LOADS ON PAGE LOAD AND REFETCHES DURING MUTATION ONSUCCESS
    const { data: taskAreaData } = useTaskAreaById(taskAreaId);

    const { notify, notifyError } = useToastNotifications();
    const {
        control,
        reset,
        handleSubmit,
        formState: { errors, isSubmitting },
    } = useZodForm({
        mode: 'onBlur',
        defaultValues: {
            area: '',
        },
        schema: taskAreaSchema,
    });

    useEffect(() => {
        if (taskAreaData) {
            reset({
                area: taskAreaData.area || '',
            });
        }
    }, [taskAreaData, reset]);

    // Delete
    const { mutate: handleDelete, isPending: isDeleteLoading } = useMutation({
        mutationFn: async () => {
            const response = await apiDelete<ApiResponse>(`/task-areas/${taskAreaId}`);
            return response;
        },
        onSuccess: async (data, variables, _) => {
            notify(`${data.taskArea.area} deleted`);
            reset({ area: '' });

            /* IF I INVALIDATE HERE BEFORE REDIRECT THE useQUERY REFETCHES */
            
            // Redirect first
            setTimeout(() => {
                router.push('/admin/task-areas');
            }, 300);

            // Invalidate queries after redirect
            setTimeout(async () => {
                await queryClient.invalidateQueries({ queryKey: ['taskAreas', 'all'] });
                await queryClient.removeQueries({ queryKey: ['taskAreas', 'single', taskAreaId] });
            }, 500);
        },
        onError: (error) => {
            notifyError(error.message);
        },
    });

    const deleteButtonHandler = async () => {
        handleDelete();
    };

    return (
        <Grid
            component="form"
            container
            item
            direction="column"
            justifyContent="flex-start"
            alignItems="flex-start"
            spacing={3}
            onSubmit={handleSubmit(handleFormSubmit)}
        >
            <Form inputs.... />
        </Grid>
    );
};

export default UpdateTaskAreaForm;