TIL : react-native 프로젝트

오늘의 트러블 슈팅 ☄️

오류내용

1. firestore에서 게시물데이터를 불러오는 방법을 react-query로 리팩토링하는 과정에서 data를 불러오지 못했다.
2. 콘솔로 console.log(data)를 찍어보니 아래와 같이 복잡한 형태의 객체가 찍혔다.

{"_converter": null, "_document": ... "hasPendingWrites": false}}

3. data.data()가 정의되지 않았다고 오류가 발생했다.
   
   

시도한 것

1. 게시물 하나하나의 아이디를 매개변수로 넣어서
   getDoc(doc(dbService, "posts", postId));을 하도록 작성하고,
   "contents"라는 쿼리키를 가지고 getDoc(doc(dbService, "posts", postId));을 포함한 fetcher함수로 useQuery 코드를 작성했다.
2. data 대신 data.result, data.id 등등 여러가지를 찍어보았다.
3. data.data(); 를 변수로 선언해보고, 오타확인 다시 하기위해 실행취소-새로작성을 반복했다.
   
   

해결방법

1. 1-1) useQuery는 쿼리키값으로 배열을 받고, 다음 인자로 fetcher함수로 받는다.
   ( 쿼리키랑 fetcher함수를 배열로 묶어버림 )

 const { isLoading, data } = useQuery(["contents", postId], getDetail);

2. 1-2 ) getDetail이라는 fetcher함수를 만들 때, 인자로 postId만 넣었는데, 구조분해할당으로 queryKey를 넣고, 쿼리키의 2번째 인자에 postId가 들어가는 배열을 queryKey에 넣는다.

export const getDetail = async({ queryKey }) => {
  const [_, postId] = queryKey;
  return await getDoc(doc(dbService, "posts", postId));
};

3. 데이터를 잘못 받아오고 있다고 생각했는데,
   여기서 그냥 data가 아닌, console.log(data.data());를 찍었을 때, 원하는 데이터를 가져올 수 있었다.

4. 휴먼에러라고 생각했지만 data가 받아오기 전인데 data에 접근하려 했기 때문에 발생한 오류였다. 이 때, console.log(data?.data()); 옵셔널체이닝연산자를 사용하니, 오류가 해결되었다.