[LAB-11] 쿼리를 두번 돌릴때 파이어베이스 'za2', Wa2 에러

[kyuran6]

질문 작성자

김진희

문제 상황

• 구현하고자 하는 기능은 다음과 같습니다

• 파이어스토어에서 특정 user_uid가 아니며, isAllow 값이 true인 category_uid를 categories 컬렉션에서 하나 가져옵니다 (첫번째 쿼리)

• 그 다음 images컬렉션에서 그 category_uid를 가진 이미지 중 3장을 보여줍니다 (두번째 쿼리)

• 

• category_uid를 가져오는것까지는 성공했으나, 이미지가 보이진 않고 다음과 같은 에러가 뜹니다

프로젝트 저장소 URL

• 공개된 GitHub 프로젝트 저장소 URL을 여기에 남깁니다.
• feature/main-SeemoreImage
• 트러블 슈팅을 위해 node_modules 폴더를 제외한 나머지를 압축해 이 곳에 첨부하세요. Asparagus.zip

환경 정보

• macOS
• Node.js v19.7.0
• 라이브러리 정보 (예: React v18.0.2)

[yamoo9]

문제 해결

• getDoc 함수가 아니라, getDocs 함수로 쿼리 요청합니다.
• Promise.all을 사용해 멀티 비동기 요청이 모두 완료되면 moreImgArr 상태 업데이트 합니다.

const getCategories = async () => {
  // ...
  const moreImgListPromises = categoryList.map((item) => {
    const q2 = query(
      collection(db, 'images'),
      where('category_uid', '==', item)
    );

    // getDocs 함수를 사용해 2번째 쿼리 요청
    return getDocs(q2).then(({ docs }) => {
      return docs.map((doc) => doc.data().url);
    });
  });

  // Promise.all을 사용해 모든 비동기 요청이 완료되면 처리
  Promise.all(moreImgListPromises).then((datas) => {
    const urls = datas.reduce((urls, data) => [...urls, data[0]], []);
    setMoreImgArr(urls);
  });
};

HomePage 컴포넌트 JSX 영역 코드는 아래와 같이 수정합니다.

<S.SeeMoreSection>
  {visible &&
    moreImgArr &&
    moreImgArr.map((url) => <SeeMoreImg key={url} src={url} />)
  }
</S.SeeMoreSection>

그러면 결과는 다음 영상과 같습니다. 😊

가이드 파일

첨부된 가이드 파일을 다운로드 받아 확인해보세요.

src.zip

[kyuran6]

답변 정말 감사합니다!