feat(dados-client): adotar react query em leituras do app

src/features/attachments/components/attachment-preview.tsx

@@ -8,6 +8,7 @@ import {
 	RiExternalLinkLine,
 } from "@remixicon/react";
 import { useEffect, useState } from "react";
+import { useAttachmentUrlQuery } from "@/features/attachments/hooks/use-attachment-url";
 import type { AttachmentForPeriod } from "@/features/attachments/queries";
 import { Button } from "@/shared/components/ui/button";
 import {
@@ -30,7 +31,6 @@ export function AttachmentPreview({
 	onClose,
 }: AttachmentPreviewProps) {
 	const [currentIndex, setCurrentIndex] = useState(selectedIndex);
-	const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 	const open = selectedIndex >= 0;
 
 	useEffect(() => {
@@ -52,17 +52,11 @@ export function AttachmentPreview({
 
 	const attachment = attachments[currentIndex];
 	const attachmentId = attachment?.attachmentId;
-
-	// Busca URL fresca a cada troca de anexo
-	useEffect(() => {
-		if (!attachmentId) return;
-		setPreviewUrl(null);
-
-		fetch(`/api/attachments/${attachmentId}/presign`)
-			.then((r) => r.json())
-			.then((data: { url: string }) => setPreviewUrl(data.url))
-			.catch(() => {});
-	}, [attachmentId]);
+	const {
+		data: previewUrl,
+		isLoading: isPreviewLoading,
+		isError: isPreviewError,
+	} = useAttachmentUrlQuery(attachmentId ?? "", open && Boolean(attachmentId));
 
 	if (!attachment) return null;
 
@@ -170,11 +164,16 @@ export function AttachmentPreview({
 				</DialogHeader>
 
 				<div className="min-h-0 min-w-0 flex-1">
-					{!previewUrl && (
+					{isPreviewLoading && (
 						<div className="flex h-full w-full items-center justify-center">
 							<div className="h-6 w-6 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-foreground" />
 						</div>
 					)}
+					{isPreviewError && (
+						<div className="flex h-full w-full items-center justify-center px-6 text-center text-sm text-muted-foreground">
+							Não foi possível carregar a visualização deste anexo.
+						</div>
+					)}
 					{isPdf && previewUrl && (
 						<iframe
 							key={attachment.attachmentId}

src/features/attachments/hooks/use-attachment-url.ts

@@ -1,13 +1,37 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
 import { useEffect, useRef, useState } from "react";
+import { fetchJson } from "@/shared/lib/fetch-json";
+
+const ATTACHMENT_URL_STALE_TIME = 4 * 60 * 1000;
+
+export const attachmentUrlQueryKey = (attachmentId: string) =>
+	["attachments", "url", attachmentId] as const;
+
+export function useAttachmentUrlQuery(attachmentId: string, enabled: boolean) {
+	return useQuery({
+		queryKey: attachmentUrlQueryKey(attachmentId),
+		queryFn: async () => {
+			const payload = await fetchJson<{ url: string }>(
+				`/api/attachments/${attachmentId}/presign`,
+			);
+
+			return payload.url;
+		},
+		enabled: enabled && Boolean(attachmentId),
+		staleTime: ATTACHMENT_URL_STALE_TIME,
+		gcTime: ATTACHMENT_URL_STALE_TIME * 2,
+	});
+}
 
 export function useAttachmentUrl(attachmentId: string) {
-	const [url, setUrl] = useState<string | null>(null);
+	const [isVisible, setIsVisible] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
 
 	useEffect(() => {
-		setUrl(null);
+		void attachmentId;
+		setIsVisible(false);
 		const el = containerRef.current;
 		if (!el) return;
 
@@ -15,10 +39,7 @@ export function useAttachmentUrl(attachmentId: string) {
 			(entries) => {
 				if (!entries[0].isIntersecting) return;
 				observer.disconnect();
-				fetch(`/api/attachments/${attachmentId}/presign`)
-					.then((r) => r.json())
-					.then((data: { url: string }) => setUrl(data.url))
-					.catch(() => {});
+				setIsVisible(true);
 			},
 			{ rootMargin: "150px" },
 		);
@@ -27,5 +48,7 @@ export function useAttachmentUrl(attachmentId: string) {
 		return () => observer.disconnect();
 	}, [attachmentId]);
 
-	return { url, containerRef };
+	const { data: url } = useAttachmentUrlQuery(attachmentId, isVisible);
+
+	return { url: url ?? null, containerRef };
 }