📌 React Hot Toast – Temel Kullanım ve React Query ile Entegrasyon

React Hot Toast, kullanıcıya uygulama içinde anlık bildirimler (toast) göstermek için kullanılan bir kütüphanedir. React Query ile birlikte kullanıldığında veri işlemlerinin sonucunu kullanıcıya hızlıca bildirmek için idealdir.

1️⃣ Toaster Bileşeni

Toaster bileşeni, tüm toast mesajlarının görünümünü ve konumunu yönetir. Genellikle App’in en üst seviyesinde eklenir.

import { Toaster } from "react-hot-toast";

function App() {
  return (
    <><Toasterposition="bottom-center"
        gutter={12}
        containerStyle={{ margin: "8px" }}
        toastOptions={{
          success: { duration: 3000 },
          error: { duration: 5000 },
          style: {
            fontSize: "16px",
            maxWidth: "500px",
            padding: "16px 24px",
            backgroundColor: "var(--color-grey-0)",
            color: "var(--color-grey-700)",
          },
        }}
      />
      {/* Uygulama içeriği */}
    </>
  );
}

• position: Toast’un ekranda hangi konumda gösterileceğini belirler.
• toastOptions: Success ve error için özel süre ve stil ayarları yapılabilir.

2️⃣ useMutation ile Veri Silme ve Toast Gösterimi

React Query’nin useMutation hook’u ile veri silme işlemi yönetilir ve sonuç toast ile gösterilir.

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { toast } from "react-hot-toast";

const queryClient = useQueryClient();

const { isPending: isDeleting, mutate } = useMutation({
  mutationFn: (id) => deleteCabin(id),
  onSuccess: () => {
    toast.success("Cabin successfully deleted!");
    queryClient.invalidateQueries({ queryKey: ["cabins"] });
  },
  onError: (err) => toast.error(err.message),
});

• onSuccess: İşlem başarılı olduğunda toast gösterir ve query önbelleğini günceller.
• onError: İşlem başarısız olduğunda hata toast’u gösterir.
• invalidateQueries: Belirtilen queryKey’in verilerinin yeniden çekilmesini sağlar.

3️⃣ Mutate Fonksiyonunu Butona Bağlama

<button onClick={() => mutate(cabinId)} disabled={isDeleting}>
  Delete
</button>

• disabled: İşlem devam ederken kullanıcıyı aynı anda tekrar tıklamaktan korur.
• mutate(cabinId): Belirli bir cabin’i silmek için mutate fonksiyonu çağrılır.