Firebase ile veri çekme işlemi

Firebase 9 ile bazı işlem adımları üzerinde güncellemeler gelmiş bulunmaktadır. Bu güncelleme ile birlikte firebase bağlantısı ve veri çekme, güncelleme , ekleme , silme gibi işlemlerde değişiklikler bulunmaktadır.

İlk olarak Firebase bağlantısına göz atalım. cdn yerine npm üzerinden firebase i projenize dahil ediyor iseniz güncel SDK 9 sürümü kurulumu sağlanacaktır.

Firebase tarafından bize verilen özel bağlantı bilgilerini tutacağımız bir js dosyası oluşturalım ve bu dosya Firebase tarafından verilen bilgileri girelim.

import { initializeApp } from "firebase/app";

const firebaseConfig = {};

const app = initializeApp(firebaseConfig);

Genel olarak Firebase tarafından size verilen bilgiler yukarıdaki gibi olacaktır.
Bu bilgilere ek olarak firestore kullanımı ile bilgileri çekeceğimiz için dosyamıza ek olarak firestore u import etmemiz ve app değişkenini getFirestore() fonksiyonu içerisinde çağırmamız gerekmektedir.

import { getFirestore } from "firebase/firestore";

const fireStore = getFirestore(app);

Bu işlemler sonrası fireStore adında oluşturduğumuz değişkenimizi dosya üzerinde export işlemi sağlamamız gerekmektedir. Aksi halde bu bilgilerin bulunduğu dosyayı işlem sağlayacağımız sayfa üzerinde çağırdığımızda sonuç alamayacak ve hata oluşacaktır.

export default fireStore

Firebase i projemize ekleme işlemi sonrası işlem sağlayacağımız sayfa üzerindeki config ayarlarımızın bulunduğu sayfayı import etmemiz gerekmektedir.

import fireStore  from 'dosyaYolu'

Bu import işlemi SDK 9 ile yeterli olmamaktadır. collection ve bazı yeni özelliklerin kullanımı için firestore u tekrar dosyamıza import ediyoruz. Fakat bu sefer getFirestore yerine collection, query, where, getDocs fonksiyonlarını çağırıyoruz.

import { collection, query, where, getDocs } from "firebase/firestore"

SDK 8 ile collection ile direk veriyi çekebiliyorduk fakat SDK 9 ile collection kullanımımızı query fonksiyonu içerisinde sağlamamız gerekmektedir.

let e = query(collection(fireStore, 'koleksiyonIsmi'))
const querySnapshot = await getDocs(e)

collection fonksiyonu içerisinde export işlemi sağladığımız değişken ve Firebase üzerinde oluşturduğumuz koleksiyon ismini girmemiz yeterli olacaktır.

querySnapshot.forEach(doc=>{
	console.log(doc.data())
})

Yukarıdaki işlemde de elde ettiğimiz dizi içerisinden data method u ile koleksiyon içerisinde bulunan her bir veriyi bir dizi olarak elde edebilmekteyiz.

Anonim

Yorum yapabilmek için giriş yapmanız gerekmektedir.

Sosyal Medya

Mobil Uygulama

Tarayıcı Eklentileri

Şifre Oluşturucu

Google Chrome Plugin

Yardımcı Siteler

w8icon

w8icon.com

Kod depo

koddepo.com

e-mvc

e-mvc.com