React Network
Task Management Uygulaması Rest API ile CRUD işlemleri
Digital Garden üzerinde RestAPI üzerinden CRUD işlemleri ile ilgili ufak ufak denemeler yapmaya başladık. Aşağıda ki yazı bu konunun detaylarını inceliyor olacağım.
Task Uygulaması üzerinden RestAPI servisleri ile basit Web uygulamaları geliştiriyor olacağız. Öncelikle aşağıda bazı linkler vereceğim. Konu hakkında eksikleri olanlar bu yazıları okuyabilirler.
- Rest API nedir ? Blog yazısı
- WebAPI üzerinden Fetch kullanımı ? Fetch API Pratikleri -1, Fetch API Pratikleri -2
- Axios Nedir ? Blog yazısı
- React Query Nedir ? Blog yazısı
Şimdi Digital Garden içerisine eklediğimiz Rest API ve GraphQL API oluşturma altyapısından biraz bahsedeyim. Bu yapıda MSW ve MSW Data kütüphanelerini kullanıyorum. Bu kütüphaneler benim deneysel DB ve Sunucu ihtiyacımı karşılıyor. React Digital Garden ve MSW(Mock Service Worker)
Bu sayede tarayıcıda bir yandan da aşağıdaki Task Rest API yi sunmuş oldum.
GET /tasks/, returns all ta in the database.
GET /tasks/:id, returns a task by their primary key (id).
POST /tasks, creates a new task.
PUT /tasks/:id, updates an task.
DELETE /tasks/:id, deletes a taks İlk Örnekte Fetch ile mevcut MSW Data örneğini kendi digital bahçeme uyarladım.. Burada MSW Data toHandlers kısmındaki versiyon probleminden kaynaklı hatalar ile baya boğuştuktan sonra, MSW tarafındaki REST servislerini kendim yazıp Data kısmındaki DB yi yönetecek kodları yazdım.
Ve ilk örneği aşağıdaki şekilde https://onurdayibasi.dev/msw_data_rest çalışabilir hale getirdim
Yukarıda’ki örnekte sunucu ile client arasındaki iletişim için Fetch API’yi kullandım. Fakat bunda tek bir component içerisinde Loading, Error vs durumlarını handle etmediğim için 2nci uygulama için daha bileşenleri bol, birbirleri arasında iletişim olan ve Error ve Loading durumlarını ele alan bir uygulama geliştirmek istedim.
Bu 2nci örnekte tüm bunları yapabilmek için Mimari yapıya da bir miktar hakim olmanız gerekiyor. Bundan dolayı aşağıdaki 2 blog yazısını okumanızı öneririm.
- Sunucu İletişiminin Mimariye Etkisi
- Container-Component Örüntüsünü ReactQuery veya ApolloClient ile Kullanmak
2nci örnekte ise aynı uygulamayı ReactQuery ve Axios kullanarak gerçekleştirdim. Örneğe bu linkten erişebilirsiniz.
Bu yöntemde ise her bir bileşen Container içerisinde yaşayan Bileşenler
- TaskListContainer →TaskList →Task
- TaskAddContainer →TaskAddButtonContainer →TaskAddButton, TaskInput
- Task → TaskDeleteButtonContainer — TaskDeleteButton
- Task ->TaskDoneCheckBoxContainer — TaskDoneCheckbox
Uygulamayı ve bileşen mantıklarını ne kadar birbirinden soyutlarsanız hem geliştirme, hem ölçeklendirme anlamında daha iyi bir altyapıya sahip olursunuz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
