How can create Container Component more efficiently in React projects with Typescript( also using React Query)

Arkadaşlar merhaba bugun sizlerle birlikte nasıl daha verimli bir Container Component oluştura biliriz React projelerinde ona bakıcaz. Ayrıca ben Typescript ve React Query kullanacağım. Typescript-i biliyorsunuz anlatmama gerek yok. Kullanmıyor ola bilirsiniz ama şiddetli tavsiye ederim kullanmanızı. React Query ise resimden de anladığınız üzere React projelerinde kolay bir şekilde data sorğuları göndermek için yaratılmış bir npm paketidir.

Lafı fazla dolandırmadan projemize geçelim Basit bir Todo projesi olucak APİ olarak da JSONPLACEHOLDER -i kullanıcam. Şimdi ilk olarak React Query-mizi kuralım.

Kurulumu bu kadar basit arkadaşlar QueryClientProvider componentine prop olarak yeni bir QueryClient instance-si pass ediyoruz. Şimdi ise Container Componentimizi yaza biliriz.

İlk önce iProp isimli bir interface tanımlıyoruz ve prop olarak componentimize gönderilecek verilerin type-ni belirtiyoruz. Olay çok basit aslında useQuery Hook-nu React Query paketinden import ediyoruz ve içine parametre olarak bir string değer bir de verimizi alıp getirecek function — u gönderiyoruz. Karşılığında değer olarak data, isLoading ve error gibi değerleri bize veriyor. Ve son olarakda komponentimizin children-larını map ediyoruz eğer child komponent doğru bir React komponentiyse ona prop olarak bu değerlerimizi gönderiyoruz.

Component-mizi bu şekilde kullana biliriz artık ve prop olarak gönderdiğimiz data-ları almak için ise:

Bu şekilde prop değerlerimizi ala biliriz ve tabii ki Typescript kullandığımız için type-larımızı unutmayalım.

Arkadaşlar bugünlükde benden bu kadar umarım bir yardımım dokunur. Hoşçakalın.