Photo by Glenn Carstens-Peters on Unsplash

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.

Onur Dayıbaşı
Frontend Development With JS
2 min readMay 21, 2023

--

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.

Ş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

https://onurdayibasi.dev/msw_data_rest

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.

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
http://localhost:4001/msw_data_react_query

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.

--

--