React İle Indexeddb Kullanarak Çevrim Dışı Çalışan Veri Deposu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Bu eğitimi takip edebilmek için temel düzeyde React ve JavaScript bilgisine sahip olmanız gerekmektedir. Projenizde modern bir geliştirme ortamı kurmuş olmanız, IndexedDB işlemlerini yönetmek için ise idb kütüphanesini kullanmanız önerilir. idb, tarayıcının karmaşık IndexedDB API'sını Promise tabanlı, daha temiz bir yapıya dönüştüren küçük bir yardımcı kütüphanedir.

• Node.js (LTS sürümü)
• React (Vite veya Create React App ile kurulmuş)
• idb kütüphanesi (npm install idb komutu ile kurulabilir)

Kurulumu tamamladıktan sonra, projenizin ana dizininde gerekli bağımlılıkların yüklü olduğundan emin olun. IndexedDB doğrudan tarayıcı üzerinde çalıştığı için herhangi bir sunucu tarafı yapılandırmasına ihtiyaç duymazsınız.

IndexedDB ile Veritabanı Bağlantısı Nasıl Yapılır?

İlk adım, veritabanını başlatmak ve gerekli nesne depolarını (Object Store) oluşturmaktır. Bu işlem, uygulamanızın yaşam döngüsünde yalnızca bir kez gerçekleşmelidir. Aşağıdaki kod bloğu, idb kütüphanesini kullanarak veritabanı bağlantısını nasıl yöneteceğinizi gösterir.

import { openDB } from 'idb';

export const initDB = async () => {
  return await openDB('NotlarDB', 1, {
    upgrade(db) {
      if (!db.objectStoreNames.contains('notlar')) {
        db.createObjectStore('notlar', { keyPath: 'id', autoIncrement: true });
      }
    },
  });
};

Bu kodda openDB fonksiyonu ile 'NotlarDB' adında bir veritabanı açıyoruz. Eğer veritabanı yoksa veya versiyonu değişmişse upgrade fonksiyonu tetiklenir ve 'notlar' adında bir tablo (nesne deposu) oluşturulur.

React İçinde Veri Ekleme İşlemi

Veritabanı bağlantısı kurulduktan sonra, kullanıcıların verilerini kaydetmek için bir fonksiyon yazmamız gerekir. Bu işlem asenkron olduğu için async/await yapısını kullanmak veri bütünlüğünü korumak adına kritiktir.

export const veriEkle = async (yeniNot) => {
  const db = await initDB();
  const tx = db.transaction('notlar', 'readwrite');
  await tx.store.add(yeniNot);
  await tx.done;
};

Burada readwrite modunu kullanarak veritabanına yazma yetkisi alıyoruz. tx.done ifadesi, işlemin başarıyla tamamlandığını garanti eder. Bu fonksiyonu React bileşenlerinizde onClick olaylarında çağırabilirsiniz.

Verileri Listeleme ve Çevrim Dışı Okuma

Uygulamanın çevrim dışı çalışabilmesi için verilerin ağa ihtiyaç duymadan okunması gerekir. IndexedDB, verileri yerel diskten okuduğu için bu işlem milisaniyeler sürer. Aşağıdaki örnek, tüm notları veritabanından nasıl çekeceğinizi gösterir.

export const tumNotlariGetir = async () => {
  const db = await initDB();
  return await db.getAll('notlar');
};

Bu fonksiyonu bir useEffect kancası içerisinde kullanarak, bileşen yüklendiğinde verileri ekrana yansıtabilirsiniz. Böylece internet bağlantısı olmasa dahi kullanıcı daha önce kaydettiği notları görebilecektir.

Veri Depolama Yöntemlerinin Karşılaştırması

Hangi durumda hangi depolama yöntemini seçeceğinizi anlamak için aşağıdaki tabloyu inceleyebilirsiniz.

Güvenlik ve Performans İpuçları

IndexedDB, tarayıcı üzerinde çalıştığı için kullanıcı verilerine doğrudan erişebilir. Bu nedenle hassas verileri (şifreler, özel anahtarlar) doğrudan IndexedDB içinde saklamaktan kaçınmalısınız. Eğer saklamanız gerekiyorsa, veriyi şifreleyerek (Encryption) kaydetmek en güvenli yoldur.

Dikkat: IndexedDB verileri tarayıcı profilinde saklanır. Kullanıcı tarayıcı geçmişini temizlediğinde bu veriler silinebilir. Kritik verileriniz için mutlaka bir arka uç (backend) senkronizasyonu planlayın.

Sıkça Sorulan Sorular

IndexedDB verileri ne kadar süre saklanır?

Kullanıcı tarayıcı önbelleğini temizlemediği veya veritabanını kod ile silmediğiniz sürece veriler kalıcıdır.

Çevrim dışı veri ile sunucu verisi nasıl senkronize edilir?

Uygulamanız çevrim içi olduğunda navigator.onLine olayını dinleyerek bekleyen verileri bir API'ye gönderen bir "Background Sync" mekanizması kurabilirsiniz.

IndexedDB'de arama yapmak hızlı mıdır?

Evet, "Index" (Dizin) oluşturarak belirli alanlar üzerinden çok hızlı sorgulama yapabilirsiniz.

React Context ile IndexedDB kullanılır mı?

Kesinlikle. Veritabanı bağlantısını bir Context içerisinde sağlayarak tüm bileşenlerden kolayca erişebilirsiniz.

Veritabanı şeması nasıl güncellenir?

openDB fonksiyonundaki versiyon numarasını artırarak upgrade bloğu içerisinde yeni nesne depoları ekleyebilirsiniz.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) veri doğrulama, hata yönetimi ve güvenlik katmanlarını (XSS koruması gibi) kendi mimarinize göre özelleştirmeniz gerekmektedir.

IndexedDB İçin İleri Seviye Hata Ayıklama ve Yönetim Stratejileri

IndexedDB, tarayıcı tabanlı bir depolama alanı olduğu için geliştirme sürecinde karşılaşılan hatalar genellikle asenkron yapıdan veya veritabanı sürüm çakışmalarından kaynaklanır. Uygulamanızın kararlılığını artırmak için tarayıcı geliştirici araçlarını (DevTools) etkin kullanmanız kritiktir.

Tarayıcı Geliştirici Araçları ile Veri Gözlemi

Chrome veya Edge tarayıcılarında "Application" (Uygulama) sekmesi altında "IndexedDB" bölümünü inceleyerek veritabanınızın anlık durumunu görebilirsiniz. Burada yer alan Delete Database seçeneği, geliştirme aşamasında şema değişikliklerini test ederken veritabanını sıfırlamak için en hızlı yöntemdir.

Hata Yönetimi ve Transaction Geri Alma

Veritabanı işlemleri sırasında oluşabilecek hataları yönetmek için onerror ve onabort olaylarını mutlaka dinlemelisiniz. Bir işlem başarısız olduğunda, veritabanı bütünlüğünü korumak için işlemi geri almanız (rollback) gerekebilir.

const transaction = db.transaction(['kullanicilar'], 'readwrite');
const store = transaction.objectStore('kullanicilar');

transaction.onerror = (event) => {
  console.error("İşlem sırasında hata oluştu:", event.target.error);
  // Hata durumunda kullanıcıya bildirim gösterilebilir
};

transaction.oncomplete = () => {
  console.log("İşlem başarıyla tamamlandı.");
};

store.add({ id: 1, isim: 'Ahmet' });

Dexie.js ile IndexedDB Karmaşıklığını Azaltma

Doğrudan IndexedDB API'si ile çalışmak, özellikle karmaşık sorgular ve ilişkisel verilerle uğraşırken zahmetli olabilir. Dexie.js, IndexedDB üzerinde çalışan, Promise tabanlı ve geliştirici dostu bir sarmalayıcı kütüphanedir. React projelerinde kod okunabilirliğini ciddi oranda artırır.

Dexie.js Kullanarak Veri Sorgulama

Dexie, standart IndexedDB'nin aksine where() ve toArray() gibi daha modern yöntemler sunar. Aşağıdaki örnek, Dexie ile veritabanı tanımlama ve sorgulama sürecini göstermektedir:

import Dexie from 'dexie';

const db = new Dexie('UygulamaVeritabani');
db.version(1).stores({
  urunler: '++id, isim, kategori' // id otomatik artar, isim ve kategori indekslenir
});

// Veri ekleme
const urunEkle = async (isim, kategori) => {
  await db.urunler.add({ isim, kategori });
};

// Sorgulama
const kategoriGetir = async (kategori) => {
  return await db.urunler.where('kategori').equals(kategori).toArray();
};

İpucu: Eğer uygulamanız çok sayıda karmaşık ilişki (join) gerektiriyorsa, Dexie.js gibi bir kütüphane kullanmak, saf IndexedDB kodları yazarken oluşabilecek "callback hell" yapısından sizi kurtaracaktır.

Performans İçin İndeksleme Stratejisi

Veritabanınız büyüdükçe, sadece id üzerinden arama yapmak yetersiz kalacaktır. db.version().stores() tanımlaması yaparken, sıkça sorguladığınız alanları (örneğin email, tarih veya durum) indeksleyerek okuma hızını 10 kata kadar artırabilirsiniz. Ancak unutmayın; her indeks, yazma (write) işlemlerine küçük bir performans maliyeti ekler. Sadece gerçekten arama yaptığınız alanları indeksleyin.

Sonuç

React ile IndexedDB kullanarak çevrim dışı çalışan bir veri deposu oluşturmak, kullanıcı deneyimini bir üst seviyeye taşıyan stratejik bir hamledir. Bu rehberde, veritabanı kurulumundan veri okuma ve yazma işlemlerine kadar temel süreçleri tamamladınız. Bir sonraki adım olarak, verilerinizi çevrim içi olduğunuzda bir REST API ile senkronize eden "Service Worker" yapısını araştırmanızı öneririm. Bu sayede uygulamanız tam bir PWA (Progressive Web App) standartlarına kavuşacaktır.