FRONTEND KAPSAM
Remix Nedir ? (Part -2 Mutations)
Birinci yazıda Remix Fetch olayını nasıl ele aldığını analiz etmiştik. Bu yazıda Mutation yani Creation / Update ve Delete olaylarını Remix nasıl ele alıyor onu analiz edeceğiz.
Remix Fetch yazımızın devamı olan bu yazıda Mutation kavramını anlamaya çalışacağız.
Liste ve Listeye Eleman Ekleme
Yaptığı ekran oldukça basit. Kişilerin listelendiği ve yeni bir kişinin eklenebildiği bir liste yapmaya çalışıyor.
Herhangi bir veri tabanında örneğin AWS DynamoDB tablosunda kişi bilgileri tutulsun. Bu kısımda 1nci ihtiyacımız olan bu DynamoDB tablosuna erişip veri çekecek bir Fetch Initiation yapısının olması
Sunucu tarafında Fetch işlemini Veritabanı üzerinden yapıyoruz. 2nci olarak Sunucu tarafında kullanıcının Request handle edecek yapı ise action ve parametre olarak request alıyor, request.formData ile POST içerisinde gönderilen veriyi alabiliyorsunuz.
Son olarak bu işlem gerçekleştikten sonra sayfa geriye Kullanıcı (Person) listesini tekrar dönüyor.
İşin ilginç kısmı Tarayıcıların yıllar önceki çalışma mantığındaki mekanizmanın aynen bu şekilde çalışıyor olması.
JS kapattığımızda aynı model tarayıcı tarafından JSON/ajax olmadan tüm sayfanın gönderimi ve geriye plain html olarak response dönmesi şeklinde de çalışır.
Ryan 26 yıl önceki yapının aynısı üzerine Remix ile JS ile extend ettiği bir yapı üzerinde ekstra Cancellation ve Optimistic UI özelliklerini görebileceğiniz bir yapıya dönüştürmüş.
Burada Remix, React Query benzeri Backend verisi ile UI sync tutma işlemini gerçekleştirip, sizi detay işlerden soyutluyor.
Peki kullanım Senaryosuna başka özellikler eklemek istersek. Örneğin Delete, Update vb..
Listeden Eleman Silme..
Şimdi uygulamaya ekleme dışında birde her bir kişinin yanında bu kullanıcıyı silebilme yeteneği eklendi.
Peki aynı yapıda birden fazla Form üzerinden farklı aksiyonları Sunucuya nasıl ileteceğiz. Remix burada HTML özelliklerini yani Form içerisindeki action düğmesine name ve value değerlerini verebilmeyi sağlıyor.
Örneğin aşağıdaki örnekte her bir elamanın yanına bir X düğmesi ve bunu Form içerisinde tanımlayarak hılı bir şekilde action oluşturmayı sağladı. HTML en temel özelliği Form ve Düğmeyle bu işlemleri çok az JS kullanarak gerçekleştirmiş oldu.
Peki sunucu tarafında nasıl çalışacak. Action içerisinde bu 2 farklı request(isteği) birbirinden ayırarak farklı farklı logicler işletmek gerekiyor. Bunuda gönderilen form verisi içerisinden rahatlıkla çekip kontrol edebiliriz.
Bu kısımda Remix yaptığı ekstra bazı işlemler bulunuyor.. Örneğin arka arkaya çok hızlı delete düğmesine basarsanız, burdaki işlemlerin cancel ederek en son POST dikkate alır.
Ekleme İşlemi Sırasında Pending Durumu
Sunucu ile iletişim sırasında bir süreliğine beklemeniz gerekir. Bu sırada kullanıcıya bunun ile ilgili beklendiğine dair bilginin verilmesi gerekir. Aşağıdaki örnekte Add düğmesine bastığımızda sunucudan cevap gelinceye kadar bu yazının Adding … olarak gözükmesini istiyoruz.
Bu durumda mevcut ekranın state yani busy (meşgul) olup olmadığını algılamamız gerekiyor. Remixde yapılan işlemler sırasında iç durumu alabilmek için useTransition hook faydalanabilirsiniz.
Eğer ki transition durumu submission işlemi sırasında ise bileşen işlem yaptığı için meşgul durumdadır. Bu durumda ilgili duruma göre bileşeni farklı durum için çizdirebiliriz.
Listeden Silme işleminde Optimistic Update ..
Optimistic Update daha sunucudan cevap gelmeden UI işlemi gerçekleştiriyor gibi yaparak müşteriye daha iyi bir kullanıcı deneyimi sunmayı hedefleriz.
Örneğin kullanıcı bir kişiyi listeden sildiğinde o anda ekrandan bu kullanıcıyı gizlersek , kullanıcı sistemin çok hızlı çalıştığını zanneder. Buradaki işlemin sonucu
- Evet silme işlemi başarılı
- Veya başarısız olabilir.
2nci durumda ekranda Retry düğmesi çıkarıp bu işlemin başarısız olduğunu kırmızı renkli göstermek istediğimizi düşünün..
Öncelikle Sunucu tarafını düşünmeden işlem sonrası olmadan işlem devam ederken sanki başarılıymış gibi UI’da güncellemeyi gerçekleştirelim. Düğmeye basar basmaz isDeleting =true haline getiyoruz ve bunu hidden = {true} için kullanıyoruz. Bu hareket de kullanıcının silindi hissiyatını oluşturur.
Peki silme işlemi sırasında bir hata oluştu. Bu durumda ne yapacağız. Öncelikle burada bir hata durumu olduğunu anlayıp, ekranı bu duruma göre render edeceğiz.
Referanslar
- Remix Single: Data Mutations with Form + action
- Remix Single: Multiple Forms and Single Button Mutations
- Remix Single: Optimistic UI
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
