Firebase - query(), getDocs(), onSnapshot()을 사용해 Firestore DB에서 데이터를 가져오기

Firebase

 

✅ query()

---

getDocs()에 넣어줄 query를 생성한다.

const tweetsQuery = query(
      collection(db, "tweets"),
      orderBy("createdAt", "desc")
    );

 

✅ getDocs()

---

getDocs()로 query에 해당하는 데이터들을 가져온다.

getDocs()는 QuerySnapshot을 return한다.

const snapshot = await getDocs(tweetsQuery);

 

✅ Fetching 해온 데이터들을 state에 저장하는 동작을 fetchTweets 함수에 담는다.

---

fetchTweets 함수는 useEffect로 실행

 const [tweets, setTweets] = useState<ITweet[]>([]);
  const fetchTweets = async () => {
    const tweetsQuery = query(
      collection(db, "tweets"),
      orderBy("createdAt", "desc")
    );
    const snapshot = await getDocs(tweetsQuery);
    const tweets = snapshot.docs.map((doc) => {
      const { tweet, createdAt, userId, username, photo } = doc.data();
      return {
        tweet,
        createdAt,
        userId,
        username,
        photo,
        id: doc.id,
      };
    });
    setTweets(tweets);
  };
  useEffect(() => {
    fetchTweets();
  }, []);

 

하지만 이 방식은 실시간 데이터 변경을 반영하지 못 한다.

 

✅ onSnapshot()

---

실시간 데이터 처리가 가능한 함수

 

인자로 reference와 observer를 받는다.

(reference로는 query를 주고 observer에는 함수를 넘겨주면 된다. 해당 함수는 인자로 snapshot을 받는다.)

 

onSnapshot()은 unsubscribe(구독 취소) 함수를 반환한다.

useEffect(() => {
    let unsubscribe: Unsubscribe | null = null;
    const fetchTweets = async () => {
      const tweetsQuery = query(
        collection(db, "tweets"),
        orderBy("createdAt", "desc"),
        limit(25)
      );
      unsubscribe = await onSnapshot(tweetsQuery, (snapshot) => {
        const tweets = snapshot.docs.map((doc) => {
          const { tweet, createdAt, userId, username, photo } = doc.data();
          return {
            tweet,
            createdAt,
            userId,
            username,
            photo,
            id: doc.id,
          };
        });
        setTweets(tweets);
      });
    };
    fetchTweets();
    return () => {
      //   unsubscribe && unsubscribe();
      unsubscribe?.();
    };
  }, []);

 

✅ deleteDoc(), deleteObject()

---

인자로 삭제할 document에 대한 ref를 주면 된다.

await deleteDoc(doc(db, "tweets", id));

 

사진이 첨부가 되어 있다면 사진도 삭제해야 한다.

  const user = auth.currentUser;
  const onDelete = async () => {
    const ok = confirm("Are you sure you want to delete this tweet?");
    if (!ok || user?.uid !== userId) return;
    try {
      await deleteDoc(doc(db, "tweets", id));
      if (photo) {
        const photoRef = ref(storage, `tweets/${user.uid}/${id}`);
        await deleteObject(photoRef);
      }
    } catch (error) {
      console.log(error);
    }
  };

 

✅ where(), orderBy(), limit()

---

where()로 조건에 해당하는 데이터들만 로딩

orderBy()로 정렬

limit()으로 pagination

  useEffect(() => {
    const fetchTweets = async () => {
      const tweetsQuery = query(
        collection(db, "tweets"),
        where("userId", "==", user?.uid),
        orderBy("createdAt", "desc"),
        limit(25)
      );
      const snapshot = await getDocs(tweetsQuery);
      const tweets = snapshot.docs.map((doc) => {
        const { tweet, createdAt, userId, username, photo } = doc.data();
        return {
          tweet,
          createdAt,
          userId,
          username,
          photo,
          id: doc.id,
        };
      });
      setTweets(tweets);
    };
    fetchTweets();
  }, [user?.uid]);

[] dependencies 배열에 user?.uid를 넣어서 user가 변경될 때마다 useEffect()를 다시 실행하여, 유저 정보가 일치하는지 확인.