Skip to main content
Version: 1.0.1

Update Query Params

updateQueryParams yardımcı fonksiyonu, verilen bir query string'i tarayıcı URL'sine ekler veya mevcut query string'i günceller. Bu işlem sayfayı yeniden yüklemeden gerçekleştirilir.

Ne İşe Yarar?​

Update Query Params:

  • Tarayıcı URL'sindeki query string'i günceller.
  • Filtreleme ve sıralama gibi durumları kullanıcı arayüzüyle senkronize eder.
  • Sayfa yeniden yüklenmeden tablo gibi bileşenlerin durumlarını güncel tutar.

İş Mantığı​

  1. URL Nesnesi Oluşturma:
    • window.location.href kullanılarak mevcut URL alınır ve yeni bir URL nesnesi oluşturulur.
  2. Query String Güncelleme:
    • URL nesnesinin search özelliği, verilen query string ile güncellenir.
  3. Tarihçeyi Güncelleme:
    • window.history.replaceState fonksiyonu ile tarayıcı geçmişi değiştirilir, böylece sayfa yeniden yüklenmez.

Fonksiyon Tanımı​

export function updateQueryParams(queryString: string) {
  const currentUrl = new URL(window.location.href);
  currentUrl.search = queryString;

  window.history.replaceState({}, "", currentUrl.toString());
}

Parametreler​

ParametreTipiAçıklama
queryStringstringTarayıcı URL'sine eklenecek veya güncellenecek query string.

Dönüş Değeri​

  • Bu fonksiyon bir değer döndürmez. Tarayıcı URL'sini günceller.

Kullanım Örneği​

Girdi Verisi​

const queryString =
  'pageNumber=2&rowCount=20&sorting={"field":"name","order":"asc"}';

Çağrı​

updateQueryParams(queryString);

Sonuç​

Tarayıcı URL'si şu şekilde güncellenir:

https://example.com/currentPage?pageNumber=2&rowCount=20&sorting={"field":"name","order":"asc"}

Kullanım Alanları​

Update Query Params, Ops Table ekosisteminde aşağıdaki alanlarda ve fonksiyonlarda kullanılır:

  • Ops Table Service (TableService.ts):

    • Kullanım Yeri: getdata ve initialProcess fonksiyonlarında çağrılır.
    • Amaç: Backend'e yapılan API çağrılarında filtreleme ve sıralama parametrelerini URL ile senkronize etmek.

  • URL Yönetimi:

    • Kullanım Yeri: Tarayıcı URL'sinin tablo durumu ile senkronize edilmesi gerektiğinde çağrılır.
    • Amaç: Kullanıcının mevcut filtreleme ve sıralama ayarlarını tarayıcı geçmişinde saklamak.

Burada Yapılan Ana İşlemler​

Update Query Params fonksiyonu, aşağıdaki işlemleri gerçekleştirir ve bu noktalarda özelleştirilebilir:

  • URL Güncelleme: Tarayıcı URL'si güncellenir, ancak sayfa yeniden yüklenmez.
  • Durum Senkronizasyonu: Kullanıcı arayüzü ile URL arasında filtreleme ve sıralama durumu eşitlenir.
  • Performans Optimizasyonu: Tarayıcı geçmişini değiştirirken sayfa yenilemesi yapılmaz, böylece kullanıcı deneyimi korunur.