Firebase 쿼리를 더 읽기 쉽게 만드는 방법

프로젝트에 Firebase가 있었습니다. 그리고 어느 시점에서 레코드가 그다지 멋져 보이지 않는다는 생각이 들었습니다. 예를 들어:

const querySnapshot = await getDocs(collection(db, "labels"));

querySnapshot.forEach((doc) => {
  console.log(`${doc.id} => ${doc.data()}`);
});

우리는 어떻게든 우리의 삶을 더 쉽게 만들어 줄 수 있는 몇 가지 라이브러리를 연구하기 시작했으며 편리한 분해 방법을 달성하는 것이 가능할 것입니다. 별도의 후크에 넣고 필요한 매개변수로 호출합니다. 우리의 GitHub 연구는 react-query-firebase 에 기반한 라이브러리인 react-query 을 발견했습니다.

거의 모든 경력을 GraphQL/Apollo로 작업한 사람으로서 저는 항상 Firebase에서 쿼리 및 돌연변이와 같은 항목을 원했고 이 라이브러리가 바로 그것입니다.

다음은 우리가 가지고 있는 후크 중 하나의 예입니다.

export const useLabelIdQueryData = (labelId: string) => {
  const account = useCurrentAccount();
  const dataQuery = doc(account.ref, 'labels', labelId);

  return useFirestoreDocumentData<Label>(['labels', labelId], dataQuery);
};

먼저 현재 사용자

를 정의합니다.

데이터

에 대한 경로를 형성합니다.

전달된 매개변수가 있는 데이터 반환

반응 구성 요소에서 어떻게 보이는지:

const { data: labelData, isLoading, isError, isPaused } = useLabelIdQueryData(id || null);

우리는 React 구성 요소를 더 깔끔하게 작성할 수 있고 분해할 수 있는 편리한 방법이 있다는 것을 깨달았습니다. 또한 labelData를 가져와 매핑을 수행합니다.

돌연변이도 비슷한 이야기입니다.

export const useUpdateTemplateMutation = (id: string) => {
  const account = useCurrentAccount();

  const dataMutation = doc(
    collection(account.ref, 'templates'),
    String(id),
  );

  return useFirestoreDocumentMutation<Template[]>(dataMutation, {
    merge: true,
  });
}; 

현재 사용자 결정

요청 경로 설명

선택한 요소

의 id를 전달합니다.

우리는

를 위해 id에 의해 특정 엔티티를 제거하는 라이브러리의 후크를 호출합니다.

이 라이브러리의 문제 중 하나는 변경 사항을 지속적으로 모니터링하는 flag subscribe: true 의 버그입니다. 곧 이 문제는 라이브러리 개발자에 의해 수정될 것이지만 현재로서는 캐시입니다.

결론.

내 개인적인 경험은 다른 개발자의 경험과 다를 수 있습니다. 그러나 나 혼자서는 Firebase가 제한이 있는 큰 블랙박스라고 느꼈고, 이를 위해 기업도 작은 비용이 아닌 추가 비용을 지불할 것입니다.