Create src/hooks/useGetProducts.ts

src/hooks/useGetProducts.ts

@@ -0,0 +1,36 @@
+// src/hooks/useGetProducts.ts
+import { useQuery } from '@tanstack/react-query';
+import { ProductListSchema, Product } from '@/lib/schemas'; // Importamos o nosso contrato Zod
+import axios from 'axios';
+
+// 🎯 [DECISÃO ARQUITETURAL]: O TanStack Query exige uma chave única para o cache.
+// ['products'] é a nossa chave.
+const PRODUCT_QUERY_KEY = ['products'];
+
+/**
+ * Custom hook para buscar todos os produtos da Fake Store API.
+ * Gerencia o cache, loading e erros automaticamente.
+ */
+export const useGetProducts = () => {
+  return useQuery({
+    queryKey: PRODUCT_QUERY_KEY,
+    queryFn: async () => {
+      // 1. Fetching dos dados da API externa
+      const response = await axios.get('https://fakestoreapi.com/products');
+
+      // 2. 🔐 [SECURITY/TYPESAFE]: Validação com Zod (Parse, Don't Validate)
+      // Se a resposta da API não corresponder ao nosso ProductListSchema, o Zod
+      // lança um erro antes que os dados cheguem na UI.
+      // Isso impede que a aplicação quebre em produção com dados inválidos.
+      const parsedData = ProductListSchema.parse(response.data);
+      
+      return parsedData; // Dados validados e tipados
+    },
+    // ⚡ [PERFORMANCE]: Configurações de cache do TanStack Query
+    // Stale time: O dado é considerado 'fresco' por 5 minutos (300.000ms).
+    // Enquanto for fresco, ele não busca na API de novo ao re-renderizar o componente.
+    staleTime: 1000 * 60 * 5, 
+    // Cache time: O dado fica na memória por 30 minutos.
+    cacheTime: 1000 * 60 * 30, 
+  });
+};