ReactJS Query ile API'lerden Veri Çekme Nasıl Yapılır

Bu blog yazısında, API'lerden veri almak ve web sitenizde görüntülemek için ReactJS Query'nin nasıl kullanılacağını ve ReactJS Query kodunuzu Apidog ile nasıl oluşturacağınızı göstereceğim.

ReactJS Query Nedir ve Neden Kullanmalısınız?

ReactJS Query, React uygulamalarınızda veri alma, önbelleğe alma ve güncelleme işlemlerini yönetmenize yardımcı olan bir kütüphanedir. API'den veya başka herhangi bir kaynaktan veri getiren fonksiyonlar olan sorgular fikrine dayanır. ReactJS Query, bu sorguların yüklenmesini, önbelleğe alınmasını, yeniden getirilmesini ve hata yönetimini sizin için halleder, böylece bunlarla uğraşmanıza gerek kalmaz.

ReactJS Query ayrıca size, sunucudaki veya başka herhangi bir kaynaktaki verileri güncelleyen fonksiyonlar olan değiştiriciler sağlar. ReactJS Query, bu değiştiricilerin iyimser güncellemelerini, geri alma işlemlerini ve hata yönetimini sizin için halleder, böylece bunlarla da uğraşmanıza gerek kalmaz.

ReactJS Query ayrıca, bileşenlerinizdeki verilere erişmenizi ve bunları işlemenizi sağlayan özel hook'lar ve bileşenler kullanarak React ile sorunsuz bir şekilde entegre olur. ReactJS Query ayrıca sayfalama, sonsuz kaydırma, arka plan getirme, bağımlı sorgular ve daha fazlası gibi özellikleri de destekler.

Peki neden ReactJS Query kullanmalısınız? İşte React uygulamalarınızda ReactJS Query kullanmanın bazı faydaları:

• Kodunuzu basitleştirir: ReactJS Query, uygulamalarınızda veri almak, önbelleğe almak ve güncellemek için yazmanız gereken kod miktarını azaltır. Verileri yönetmek için Redux, Axios, SWR veya başka herhangi bir kütüphane kullanmanıza gerek yoktur. Sadece ReactJS Query ve hook'larını ve bileşenlerini kullanırsınız ve hazırsınız.
• Performansınızı artırır: ReactJS Query, verileri önbelleğe alarak ve gereksiz isteklerden kaçınarak uygulamalarınızın performansını optimize eder. Ayrıca, verilerin ne zaman ve ne sıklıkta yeniden getirilmesini ve eski verilerin nasıl işlendiğini kontrol etmenizi sağlar. ReactJS Query ayrıca, uygulamanızın performansını daha da artırabilen suspense, eşzamanlı mod ve ön getirme gibi özellikleri de destekler.
• Kullanıcı deneyiminizi geliştirir: ReactJS Query, pürüzsüz ve tutarlı veri yükleme ve güncelleme sağlayarak uygulamalarınızın kullanıcı deneyimini geliştirir. Ayrıca, verilerinizin yükleme, hata ve başarı durumlarını özelleştirmenize ve kullanıcılarınıza geri bildirim sağlamanıza olanak tanır. ReactJS Query ayrıca, uygulamanızın daha duyarlı ve etkileşimli hissetmesini sağlayabilen iyimser güncellemeler gibi özellikleri de destekler.

ReactJS Nasıl Kurulur ve Ayarlanır

ReactJS, kullanıcı arayüzleri oluşturmak için bir JavaScript kütüphanesidir. Bilgisayarınıza ReactJS'yi kurmak ve ayarlamak için şu adımları izleyebilirsiniz:

• Adım 1: Bilgisayarınıza bir JavaScript çalışma zamanı ortamı olan Node.js'yi kurun. Node.js yükleyicisini resmi web sitesinden ücretsiz olarak indirebilirsiniz. En son özelliklere sahip olmasına rağmen, uzun süreli destek (LTS) sürümü önerilir.
• Adım 2: Tam bir ReactJS uygulamasını oluşturmak ve çalıştırmak için tüm bağımlılıkları yükleyen bir araç olan create-react-app'i kullanarak ReactJS'yi kurun. Bunu yapmak için Node.js için paket yöneticileri olan npm veya yarn kullanabilirsiniz. Örneğin, terminalinizde bu komutu çalıştırabilirsiniz:

npx create-react-app my-app

Bu komut, geçerli klasörün içinde my-app adlı bir dizin oluşturacak, ilk proje yapısını oluşturacak ve geçişli bağımlılıkları yükleyecektir.

• Adım 3: Geliştirme sunucusunu başlatın ve uygulamanızı tarayıcıda açın. Bunu yapmak için npm veya yarn kullanabilirsiniz. Örneğin, terminalinizde bu komutları çalıştırabilirsiniz:

cd my-app
npm start

Bu komutlar, geliştirme sunucusunu başlatacak ve uygulamanızı tarayıcıda http://localhost:3000/ adresinde açacaktır. src klasöründeki dosyaları düzenleyebilir ve değişiklikleri tarayıcıda görebilirsiniz.

Bu kadar! Bilgisayarınıza ReactJS'yi başarıyla kurdunuz ve ayarladınız ve ilk ReactJS uygulamanızı oluşturdunuz ve çalıştırdınız. ReactJS hakkında daha fazla bilgiyi, belgeleri, örnekleri, eğitimleri ve daha fazlasını bulabileceğiniz resmi web sitesinden öğrenebilirsiniz.

ReactJS Query ile Sorgular Nasıl Oluşturulur ve Kullanılır

Artık ReactJS Query'yi nasıl kuracağınızı ve ayarlayacağınızı bildiğinize göre, ReactJS Query ile sorguları nasıl oluşturacağımıza ve kullanacağımıza bakalım. Sorgular, ReactJS Query'nin temel kavramıdır ve API'lerden veri almak ve görüntülemek için ana yoldur.

Önceki bölümde gördüğümüz gibi, React bileşenlerinizde sorgular oluşturmak ve kullanmak için useQuery hook'unu kullanabilirsiniz. useQuery hook'u iki argüman alır: bir sorgu anahtarı ve bir sorgu fonksiyonu. Sorgu anahtarı, sorgunuz için benzersiz bir tanımlayıcıdır ve sorgu fonksiyonu, bir API uç noktasından veri getiren ve bir promise döndüren bir fonksiyondur.

useQuery hook'u, aşağıdaki özellikleri içeren bir nesne döndürür:

• data: API uç noktasından getirilen veri. Sorgu yüklenirken veya bir hatası olduğunda undefined olur.
• status: Sorgunun durumu. Şu değerlerden biri olabilir: 'idle', 'loading', 'error' veya 'success'.
• error: Sorgu fonksiyonu tarafından atılan hata. Sorgu yüklenirken veya başarılı olduğunda undefined olur.
• isIdle: Sorgunun boşta olup olmadığını gösteren bir boolean. Sorgu etkinleştirilmediğinde veya henüz veri getirmeye başlamadığında true olur.
• isLoading: Sorgunun yüklenip yüklenmediğini gösteren bir boolean. Sorgu, API uç noktasından veri getirirken true olur.
• isError: Sorgunun bir hatası olup olmadığını gösteren bir boolean. Sorgu fonksiyonu bir hata attığında veya promise'ı reddettiğinde true olur.
• isSuccess: Sorgunun başarılı olup olmadığını gösteren bir boolean. Sorgu fonksiyonu promise'ı çözdüğünde ve verileri döndürdüğünde true olur.

ReactJS Query ile Veri Nasıl Getirilir

ReactJS Query'nin temel özelliği, sorgularla veri getirmektir. Sorgular, bir API'den veya başka herhangi bir kaynaktan veri getiren fonksiyonlardır. ReactJS Query, bileşenlerinizde sorguları kullanmanıza olanak tanıyan useQuery adlı özel bir hook sağlar.

useQuery hook'u iki argüman alır: bir sorgu anahtarı ve bir sorgu fonksiyonu. Sorgu anahtarı, dize veya dizi olabilen sorgunuz için benzersiz bir tanımlayıcıdır. Sorgu fonksiyonu, getirmek istediğiniz verilerle çözülen bir promise döndüren bir fonksiyondur.

Örneğin, ReactJS Query kullanarak sahte bir API'den bir gönderi listesi getirmek istediğinizi varsayalım. Verileri almak için fetch API'sini kullanan bir sorgu fonksiyonu oluşturabilirsiniz:

// Gönderileri getiren bir sorgu fonksiyonu tanımlayın
const fetchPosts = async () => {
  // Verileri almak için fetch API'sini kullanın
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  // Yanıtı JSON olarak ayrıştırın
  const data = await response.json()
  // Verileri döndürün
  return data
}

Ardından, 'posts' sorgu anahtarını ve fetchPosts sorgu fonksiyonunu geçirerek bileşeninizde useQuery hook'unu kullanabilirsiniz:

// Gönderileri getirmek için useQuery hook'unu kullanın
const { data, isLoading, isError, error } = useQuery('posts', fetchPosts)

useQuery hook'u, verilere erişmek ve bunları işlemek için kullanabileceğiniz çeşitli özelliklere sahip bir nesne döndürür. En önemlileri şunlardır:

• data: Sorgu fonksiyonu tarafından döndürülen veri veya sorgu yükleniyorsa veya bir hatası varsa tanımsız.
• isLoading: Sorgunun yüklenip yüklenmediğini gösteren bir boolean.
• isError: Sorgunun bir hatası olup olmadığını gösteren bir boolean.
• error: Sorgu yükleniyorsa veya hatası yoksa, sorgu fonksiyonu tarafından döndürülen hata nesnesi veya tanımsız.

Bileşeninizi sorgunun durumuna göre oluşturmak için bu özellikleri kullanabilirsiniz. Örneğin, sorgu yüklenirken bir yükleme döndürücüsü, sorgunun bir hatası varsa bir hata mesajı veya sorgu başarılıysa bir gönderi listesi gösterebilirsiniz:

// Bileşeni sorgunun durumuna göre oluşturun
return (
  <div>
    {isLoading && <div>Yükleniyor...</div>}
    {isError && <div>Hata: {error.message}</div>}
    {data && (
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    )}
  </div>
)

ReactJS Query ile veri getirme şekli budur. ReactJS Query, verileri sizin için otomatik olarak önbelleğe alacak ve bileşen monte edildiğinde, söküldüğünde veya sorgu anahtarı değiştiğinde yeniden getirecektir. Ayrıca, staleTime, refetchOnWindowFocus, retry ve daha fazlası gibi çeşitli seçenekleri kullanarak sorgunun davranışını özelleştirebilirsiniz. Seçeneklerin ve açıklamalarının tam listesini ReactJS Query belgelerinde bulabilirsiniz.

ReactJS Query istemci kodunu oluşturmak için Apidog nasıl kullanılır

Apidog, web API'lerini kolaylıkla keşfetmenize, test etmenize ve entegre etmenize yardımcı olan web tabanlı bir platformdur. Apidog'un sunduğu özelliklerden biri, sağladığınız veya seçtiğiniz API spesifikasyonuna göre tek bir tıklamayla Fetch istemci kodu oluşturma yeteneğidir.

• Kontrol panelindeki "Yeni API" düğmesine tıklayın veya listeden mevcut bir API seçin.

• "İstemci Kodunu Oluştur"a tıklayın. Apidog, tanımladığınız veya seçtiğiniz uç noktalar ve veri yapılarıyla eşleşen API'niz için Fetch istemci kodunu oluşturmak üzere OpenAPI Oluşturucu motorunu kullanacaktır.

• Oluşturulan kodu panonuza kopyalayabileceğiniz bir modal penceresi göreceksiniz.

Oluşturulan kodu kendi projenizde kullanabilir veya istediğiniz gibi değiştirebilirsiniz. Ayrıca, API spesifikasyonunuza göre API yanıtlarını simüle eden Apidog sahte sunucusuyla kodu test edebilirsiniz.

Sonuç

ReactJS Query, veri getirme deneyimimizi çok daha kolay ve daha iyi hale getirebilen güçlü ve çok yönlü bir kütüphanedir. JSON verileri döndüren herhangi bir API uç noktasıyla çalışabilir ve herhangi bir React bileşeni veya kütüphanesiyle entegre olabilir.

Bu blog yazısında, API'lerden veri almak ve web sitemizde görüntülemek için ReactJS Query'nin nasıl kullanılacağını öğrendik. ReactJS Query'nin React uygulamaları için veri getirmeyi ve önbelleğe almayı nasıl basitleştirdiğini ve ReactJS Query kodunu Apidog'da nasıl oluşturacağımızı gördük. Okuduğunuz için teşekkür ederiz ve mutlu kodlamalar!