[Firebase] 파이어베이스 firestore 데이터 가져오기

지난 번에 저장한 데이터를 보여주기위해서 데이터를 가져오는 코드를 썼다.

나는 데이터 전체를 한번만 가져오면 됐기 때문에 getDocs를 사용했다.

참고

 

필요한 요소 import 하기

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

 

파이어베이스 저장소를 불러온다.

const firebaseConfig = {
        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
        authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
        projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
        storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
        appId: import.meta.env.VITE_FIREBASE_APP_ID,
        measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
      };
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

데이터를 읽어 올 컬렉션에서 모든 문서를 다 불러온다.

const memoRef = collection(db, 'attend-survey');
const allRes = await getDocs(memoRef);

 

원하는데로 사용한다.

나는 map을 사용해서 allRes를 쓰고 싶었는데 map사용이 불가했다. 받아온 데이터를 typeof로 검사했더니 객체였다. allRes를 콘솔에 찍어보니 객체에 객체에 객체여서 내가 원하는 형태로 데이터를 가공했다. 

let dataList = [];
allRes.forEach((res, i) => {
        dataList.push({
          id: res._document.key.path.segments[6],
          name: res._document.data.value.mapValue.fields.name.stringValue,
          email: res._document.data.value.mapValue.fields.email.stringValue,
          attend: res._document.data.value.mapValue.fields.attend.stringValue,
          dinner: res._document.data.value.mapValue.fields.dinner.stringValue,
          memo: res._document.data.value.mapValue.fields.memo.stringValue,
          createdAt:
            res._document.data.value.mapValue.fields.createdAt.timestampValue,
        });
      });

 

---

 

전체 코드

공식문서에 getDocs에 await을 붙여서 설명하길래 필수인가 싶어 데이터를 받아오는 동작을 함수로 감싸주고 함수를 실행시켰다.

useEffect(() => {
    const loadData = async () => {
      const firebaseConfig = {
        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
        authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
        projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
        storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
        messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
        appId: import.meta.env.VITE_FIREBASE_APP_ID,
        measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
      };
      const app = initializeApp(firebaseConfig);
      const db = getFirestore(app);
      const memoRef = collection(db, 'attend-survey');
      const allRes = await getDocs(memoRef);
      let dataList = [];
      allRes.forEach((res, i) => {
        dataList.push({
          id: res._document.key.path.segments[6],
          name: res._document.data.value.mapValue.fields.name.stringValue,
          email: res._document.data.value.mapValue.fields.email.stringValue,
          attend: res._document.data.value.mapValue.fields.attend.stringValue,
          dinner: res._document.data.value.mapValue.fields.dinner.stringValue,
          memo: res._document.data.value.mapValue.fields.memo.stringValue,
          createdAt:
            res._document.data.value.mapValue.fields.createdAt.timestampValue,
        });
      });
      const onlyJustcodeList = dataList
        .map((el) => (el.name === '' ? { ...el, name: '익명' } : el))
        .filter(
          (el) => el.name !== 'Joomi' && el.name !== '김치링' && el.memo !== ''
        );
      setList(onlyJustcodeList);
    };
    loadData();
  }, []);

 

+ 데이터를 읽어오기 위해서 이 모든 것들이 필수요소인지는 정확하지 않아서 확인해보고 다음에 수정하려고 한다.