[fireStore] 최신 버전편. document field 업데이트하기. React 적용

firebase 최신 문법으로 적용함.

Javascript + React 웹 애플리케이션

document에 속한 field 값 수정하기

문서: https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document

Cloud Firestore에 데이터 추가  |  Firebase Documentation

 

 

적용 코드

import {
  getFirestore,
  collection,
  setDoc,
  doc,
} from "firebase/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

/**
 * @description 파이어스토어 문서 필드 업데이트
 * @param {*} tweetObj: Object
 * @param {*} newTweet: String
 */
async function updateSubmitTweet(tweetObj, newTweet) {
  try {
    const fDocument = doc(db, "tweet", tweetObj.id);
    await setDoc(fDocument, {
      ...tweetObj,
      createdAt: new Date().getTime(),
      tweet: newTweet,
    });
  } catch (error) {
    throw new Error(error);
  }
}

 

 

컬렉션 쿼리 적용 및 정렬

적용 전, firestore 웹 콘솔에서 색인 필드 설정을 해줘야 한다.

나는 createdAt을 내림차순 정렬을 해야만 했다. 그래서, 색인 설정을 다음처럼 해주었다.

/**
 * @description 내 트윗 문서 가져오기
 * @returns
 */
const tweetCollection = collection(db, "tweet");
async function myTweetList(uid) {
  const resultArr = [];
  try {
    const result = query(
      tweetCollection,
      where("userId", "==", uid),  // ⭐️ 쿼리
      orderBy("createdAt", "desc")  // ⭐️ 정렬
    );

   // 쿼리한 거 뽑기
    const querySnapshot = await getDocs(result);
    querySnapshot.forEach((doc) => {
      resultArr.push({ ...doc.data(), id: doc.id });
    });
  } catch (error) {
    throw new Error(error);
  }
  return resultArr;
}

쿼리 및 정렬해서 보면, 웹에 다음처럼 보인다.