Frontend’de HTTP İstekleri ve Server State Yönetimi: Axios, React Query ve Redux-Saga

Frontend geliştiricilerin en çok uğraştığı şeylerden biri: “backend’den veri çekmek”. Evet, işin temelinde çok basit gibi görünüyor: API endpoint’i ver, çağır, sonucu state’e koy. Ama iş pratiğe dökülünce yöntemler, kütüphaneler ve farklı yaklaşımlar devreye giriyor.

React ekosisteminde bu işi yapmanın onlarca yolu var:

• Klasik fetch API’si
• axios gibi HTTP client’lar
• useMutation
• react-query (useQuery hook’u) gibi hazır çözümler
• Redux-Saga / Thunk gibi state management odaklı yaklaşımlar

1. Axios - Frontend Dünyasının Haberleşme Köprüsü

Modern web uygulamaları geliştirdiğimizde, uygulamamızın tek başına yaşayan bir ada olmadığını biliriz. Kullanıcı verilerini kaydetmek, hava durumunu çekmek veya bir giriş işlemini doğrulamak için sürekli bir API (Application Programming Interface) ile iletişim kurmamız gerekir. İşte bu noktada Axios çıkıyor.

• Kullanımı basit:

import axios from "axios";  
const getUsers = async () => {   
const response = await axios.get("/api/users");   
return response.data; 
}

Burada axios.get(“/api/users”) ile backend’deki /api/users endpoint’ine GET isteği atıyoruz.

• response.data → API’nin döndürdüğü esas veriyi temsil ediyor (örneğin kullanıcı listesi).
• Küçük bir not: Fonksiyon async olduğu için her zaman await ile çağrılmalı.

Nasıl Kullanılır?

Örneğin React bileşeninde:

import React, { useEffect, useState } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getUsers();
      setUsers(data);
    };
    fetchData();
  }, []);

  return (
    <div>
      {users.map(user => <p key={user.id}>{user.name}</p>)}
    </div>
  );
}

Artıları:

• Promise tabanlı → async/await ile çok temiz yazılır.
• Request/response interceptors var (mesela token eklemek için).
• Hata yakalama (error handling) kolaydır.

Eksileri:

• Sadece HTTP istekleri için; caching, retry, background update gibi gelişmiş özellikler yok.
• Kullanım Alanı: Küçük/orta ölçekli projeler, basit API çağrıları.

👉 Axios, hâlâ en çok kullanılan yöntemlerden biri çünkü öğrenmesi kolay ve esnek.

2. Fetch API

Axios’tan önce aslında elimizde fetch vardı.

• Avantajı: Harici paket kurmaya gerek yok.
• Dezavantajı: Hata yakalama Axios kadar kolay değil. Response body’yi JSON’a çevirmek için ekstra işlem gerekiyor.

const getUsers = async () => {
  const res = await fetch("/api/users");
  const data = await res.json();
  return data;
}

👉 Günümüzde Axios biraz daha “developer friendly” olduğu için daha çok tercih ediliyor ama fetch de çoğu zaman yeterli.

3. useMutation

Şimdiye kadar hep veri çekme (GET) işlemlerinden bahsettik. Ama çoğu zaman kullanıcı bir form doldurur, yeni veri ekler, siler ya da günceller. Yani artık sadece “okumak” değil, yazmak (POST, PUT, DELETE) da isteriz. İşte burada React Query’nin useMutation hook’u devreye giriyor 🚀

import { useMutation } from "@tanstack/react-query";
import { request } from "../api/request";
// API fonksiyonumuzu tanımlayalım
const Users = {
  create: (body) => request.post("/users", body),
};
// useMutation kullanımı
function AddUserForm() {
  const mutation = useMutation({
    mutationFn: (newUser) => Users.create(newUser),
    onSuccess: () => {
      console.log("Kullanıcı başarıyla eklendi!");
    },
    onError: (error) => {
      console.error("Bir hata oluştu:", error);
    },
    retry: false,   // hata olursa yeniden deneme yapma
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    const newUser = { name: "Ahmet", email: "ahmet@example.com" };
    mutation.mutate(newUser);
  };
  return (
    <div>
      <button onClick={handleSubmit} disabled={mutation.isLoading}>
        {mutation.isLoading ? "Ekleniyor..." : "Kullanıcı Ekle"}
      </button>
    </div>
  );
}

Açıklama 👇

• useMutation → veri göndermek, güncellemek veya silmek için kullanılır.
• mutationFn → isteği yapan fonksiyondur (örneğin Post/users).
• mutation.mutate(data) → isteği tetikler.
• onSuccess ve onError → isteğin sonucuna göre çalışır.
• retry: false → hata durumunda React Query’nin tekrar denemesini kapatır.

Artıları

✅ Form işlemlerinde, kayıt ekleme/güncelleme/silmede çok kullanışlıdır. ✅ API sonrası otomatik refetch veya cache temizleme yapılabilir (invalidateQueries). ✅ Hata yönetimi ve loading durumu otomatik gelir.

Eksileri

⚠ Küçük projelerde “fazla soyut” gelebilir. ⚠ Backend hatalarını yakalamayı doğru kurgulamak gerekir.

Gerçek Kullanım Senaryosu

  const mutation = useMutation({
    mutationFn: createUser,
    onSuccess: () => {
      console.log('Kullanıcı başarıyla eklendi!')
    },
    onError: (error) => {
      console.error('Bir hata oluştu:', error)
    },
    retry: false,
    enabled: false
  })

 const handleSubmit = () => {
    mutation.mutate({ name: 'Ahmet', email: 'ahmet@example.com' })
  }

  return (
    <div>
      <button onClick={handleSubmit} disabled={mutation.isPending}>
        {mutation.isPending ? 'Ekleniyor...' : 'Kullanıcı Ekle'}
      </button>
    </div>
  )
}

Bir kullanıcı formu gönderdiğinde, başarılıysa listeyi güncellemek istersin. Bunu yapmak için:

onSuccess: () => {
  queryClient.invalidateQueries(["users"]);
}

yazarak cache’i yenileyebilir, listeyi otomatik güncel tutabilirsin. Bu da React Query’nin “veri yönetimini tam otomatik hale getiren” gücüdür.

👉 Detaylı UseMutation Anlatımım.

4. React Query — useQuery

Örneğin şöyle bir yapı kuralım:

// api/request.js
const API_URL = "https://api.example.com";

async function globalRequest(url, method = "GET", body, headers = {}) {
  const response = await fetch(`${API_URL}${url}`, {
    method,
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: body ? JSON.stringify(body) : undefined,
  });

  if (!response.ok) {
    throw new Error("API isteği başarısız oldu!");
  }

  return response.json();
}

export const request = {
  get: (url) => globalRequest(url, "GET"),
  post: (url, body) => globalRequest(url, "POST", body),
  put: (url, body) => globalRequest(url, "PUT", body),
  del: (url) => globalRequest(url, "DELETE"),
};

Burada internalRequest aslında ister fetch ister axios ile yazılabilir. Önemli olan tek bir kapı yaratmak.

API Modülü Örneği

Her resource için ayrı dosya oluşturabilirsin:

// api/customers.js
import { request } from "./request";

export const Customers = {
  getAll: () => request.get("/customers"),
  create: (body) => request.post("/customers", body),
};

React Query ile Kullanımı

import { useQuery } from "@tanstack/react-query";
import { Customers } from "../api/customers";

function CustomerList() {
  const { data, isLoading, error } = useQuery(
    "customers",
    () => Customers.getAll(),
    { retry: 1 } // hata olursa 1 kez daha denesin
  );

  if (isLoading) return <p>Yükleniyor...</p>;
  if (error) return <p>Bir hata oluştu!</p>;

  return (
    <ul>
      {data.map(c => <li key={c.id}>{c.name}</li>)}
    </ul>
  );
}

Bu yapı sayesinde:

• Her şey request üzerinden geçtiği için tek noktadan kontrol edersin.
• API endpoint’leri daha okunaklı olur (Customers.getAll(), Orders.create()).

👉 Detaylı useQuery Anlatımım.

5. Redux-Saga / Thunk — “Kontrollü”

Bir dönem her şey Redux’tan geçiyordu. API çağrılarını yönetmek için Redux Thunk veya Redux-Saga çok popülerdi.

• Thunk: Basit, action içinde async iş yapmaya izin veriyor.
• Saga: Daha büyük projeler için; middleware ile async akışları kontrol edebiliyorsun.

// Saga örneği
function* fetchUsersSaga() {
  try {
    const users = yield call(api.getUsers);
    yield put({ type: "USERS_SUCCESS", payload: users });
  } catch (err) {
    yield put({ type: "USERS_ERROR", error: err });
  }
}

Artıları:

• Kompleks akışlarda tam kontrol.
• Büyük enterprise projelerde mantıklı.

Eksileri:

• Boilerplate çok fazla.
• Küçük projeler için ağır kalıyor.

👉 Detaylı Redux-Saga Anlatımım

Günümüzde Redux’un yerini React Query gibi kütüphaneler büyük ölçüde aldı.

Diğer Yöntemler

• SWR (by Vercel) → React Query’ye benzer ama daha minimal.
• Apollo Client → GraphQL projeleri için en popüler seçenek.

Peki En Çok Kullanılan Hangisi?

• Axios → Hâlâ çok yaygın çünkü basit ve her yerde çalışıyor.
• UseMutation, React Query (useQuery) → Modern projelerde hızla yükseliyor.
• Redux-Saga/Thunk → Büyük legacy projelerde hâlâ var ama yeni başlayanlar pek tercih etmiyor.

Frontend’de API çağrısı yapmak için tek bir “doğru” yok. Projenin büyüklüğü, ekibin alışkanlıkları ve ihtiyaçlar burada belirleyici oluyor.

• Küçük projeler → Axios veya Fetch
• Orta ölçekli → React Query, useMutation
• Büyük/kompleks projeler → Saga / Apollo Client

Özetle: Başlangıç için Axios, modern projeler için React Query, enterprise düzey için Saga.

React ekosistemi hızla değişiyor, ama unutma: önemli olan veriyi çekmek değil, onu doğru zamanda, doğru şekilde yönetmek.