İçeriğe geç
Zeynep Baş — Ana sayfa
Tüm yazılar
  • React

React Query ile Repository Pattern'i Birlikte Kullanmak

React Query ve Repository Pattern'i birlikte kullanarak Next.js projelerinde API işlemlerini daha düzenli, sürdürülebilir ve ölçeklenebilir hale getirebiliriz.

Zeynep Baş3 dk okuma

Repository Pattern Nedir?

API işlemlerini componentlerden ayırmak

Repository Pattern, uygulamanın veri erişim işlemlerini ayrı bir katmanda yönetmesini sağlayan bir tasarım yaklaşımıdır.

  • API çağrılarını merkezi bir yapıda toplamak

  • Componentleri API detaylarından ayırmak

  • Kod tekrarını azaltmak

  • Veri erişim katmanını daha kolay değiştirebilmek

Component içerisinde doğrudan axios veya fetch kullanmak yerine API işlemleri repository içerisinde tanımlanabilir.

  • getTasks

  • createTask

  • updateTask

  • deleteTask

React Query Nedir?

Server state yönetimini kolaylaştırmak

React Query, backend'den alınan verilerin frontend tarafında yönetilmesini sağlayan bir server state yönetim kütüphanesidir.

  • Caching

  • Loading state

  • Error state

  • Refetching

  • Background updates

React Query özellikle API'den gelen verilerin tekrar tekrar manuel olarak yönetilmesi gereken durumlarda büyük kolaylık sağlar.

  • useQuery

  • useMutation

  • queryKey

  • queryFn

  • invalidateQueries

Neden İkisini Birlikte Kullanmalıyız?

Her katmanın farklı bir sorumluluğu olması

Repository Pattern ile React Query aynı problemi çözmez. Repository veri kaynağıyla nasıl iletişim kurulacağını yönetirken, React Query bu verinin frontend tarafındaki yaşam döngüsünü yönetir.

  • Repository → API iletişimi

  • React Query → Server state yönetimi

  • Hook → React Query işlemlerini kapsülleme

  • Component → UI ve kullanıcı etkileşimi

Bu ayrım sayesinde component içerisinde API detayları, cache yönetimi veya axios işlemleri bulunmak zorunda kalmaz.

  • Daha temiz componentler

  • Daha az tekrar

  • Daha kolay bakım

  • Daha belirgin sorumluluklar

Repository Katmanı

API çağrılarını tek bir noktada toplamak

Task feature içerisinde repository katmanı task API ile iletişim kurabilir.

  • getTask()

  • createTask()

  • updateTask()

  • deletedTask()

  • updateTaskStatus()

Component doğrudan API endpoint'ini bilmek yerine repository tarafından sağlanan fonksiyonları kullanır.

  • API URL'lerini componentten uzaklaştırmak

  • HTTP method detaylarını gizlemek

  • Response işlemlerini merkezi hale getirmek

React Query Hook Katmanı

Repository ile UI arasında bağlantı kurmak

Custom hook içerisinde repository fonksiyonları React Query ile birlikte kullanılabilir.

  • useQuery ile verileri çekmek

  • useMutation ile veri değiştirmek

  • Loading durumunu yönetmek

  • Error durumunu yönetmek

Component yalnızca custom hook'u kullanarak ihtiyaç duyduğu verilere ulaşabilir.

  • useTasks()

  • tasks

  • isLoading

  • error

  • createTask

Query Key Kullanımı

Cache yönetiminin temel noktası

React Query'de her sorgunun kendine ait bir queryKey değeri bulunmalıdır. Bu değer cache içerisindeki verinin kimliğini belirler.

  • ["tasks"]

  • ["tasks", id]

  • ["task-statistics"]

  • ["tasks", "today"]

Farklı API verileri için aynı queryKey'i kullanmak cache çakışmalarına ve beklenmeyen sonuçlara neden olabilir.

  • Liste verileri için farklı key

  • Detay verileri için farklı key

  • İstatistikler için farklı key

Mutation ve Cache Invalidation

Veri değiştiğinde cache'i güncellemek

Yeni bir task oluşturulduğunda veya mevcut task güncellendiğinde React Query cache içerisindeki verinin güncel tutulması gerekir.

  • createTask mutation

  • updateTask mutation

  • deleteTask mutation

  • invalidateQueries

Mutation başarılı olduktan sonra ilgili query invalidate edilerek güncel verinin tekrar alınması sağlanabilir.

  • ["tasks"] query'sini invalidate etmek

  • Güncel task listesini tekrar almak

  • UI'ın otomatik olarak güncellenmesini sağlamak

Feature-Based Architecture

Repository yapısını feature bazında organize etmek

Repository Pattern, feature-based architecture ile birlikte kullanıldığında her feature kendi veri erişim katmanına sahip olabilir.

  • features/task/repositories

  • features/task/providers

  • features/task/hooks

  • features/task/components

Bu yapı sayesinde task, goal, notes ve documents gibi farklı feature'lar birbirinden daha bağımsız şekilde geliştirilebilir.

  • Task

  • Goal

  • Notes

  • Documents

Katmanların Sorumlulukları

Her katmanın tek bir göreve odaklanması

Katmanların sorumluluklarını birbirinden ayırmak, uygulamanın büyümesiyle ortaya çıkabilecek karmaşıklığı azaltır.

  • Component → UI

  • Hook → State ve React Query

  • Repository → Veri erişimi

  • Provider → API bağlantısı

  • Adapter → Veri dönüşümü

Bu yaklaşım sayesinde bir katmanda yapılan değişiklik diğer katmanları minimum seviyede etkiler.

  • Daha düşük coupling

  • Daha yüksek cohesion

  • Daha kolay test edilebilirlik

  • Daha kolay bakım

Sonuç

Daha temiz ve ölçeklenebilir frontend uygulamaları

React Query ve Repository Pattern'i birlikte kullanmak, API iletişimi ile server state yönetimini birbirinden ayırarak daha düzenli bir frontend mimarisi oluşturmayı sağlar.

  • Temiz component yapısı

  • Merkezi API yönetimi

  • Kontrollü cache yönetimi

  • Daha kolay bakım

Özellikle feature-based architecture kullanan büyük Next.js ve React projelerinde bu yaklaşım uygulamanın sürdürülebilirliğini artırabilir.

  • Repository Pattern

  • React Query

  • Custom Hooks

  • Feature-Based Architecture

Diğer yazılar