react-query-firebase가 있는 Firestore

이전 기사에서 우리는 인증을 설정했고 이제 우리는
비즈니스 및 UI 로직을 추가할 준비가 되었습니다.

가장 먼저 필요한 것

npm i @react-query-firebase/firestore dayjs date-fns 
react-day-picker uniqid

npm i -D @types/dayjs @types/uniqid"

repo link

react-query-firebase docs page

이 프로젝트에 대한 팁

react-query-firebase has many hooks for all kinds of operations
finding the right one is as important as solving the problem

예를 들어

const query = useFirestoreQuery(["projects"], ref,{
subscribe:true
});

const snapshot = query.data;

return snapshot.docs.map((docSnapshot) => {
  const data = docSnapshot.data();
  return <div key={docSnapshot.id}>{data.name}</div>;
});

이것은 실시간 업데이트를 위한 선택적 구독 설정으로 컬렉션을 쿼리하기 위한 후크이며 기본적으로 꺼져 있습니다.
이 후크는 프로젝트에 직접 필요하지 않은 클래스로 가득 차 있을 수 있는 스냅샷을 반환하며 데이터 변형에 대한 캐시를 수동으로 관리하기가 정말 어렵습니다.

운 좋게도 그들은 내가 정확히 필요한 데이터만 가져올 수 있는 후크를 가지고 있습니다.

const query = useFirestoreQueryData(["projects"], ref,{
subscribe:true
});

return query.data.map((document) => {
  return <div key={document.id}>{document.name}</div>;
});

앞에서 언급한 것처럼 react-query는 백그라운드에서 일부 스마트 캐시 관리를 수행하여 현재 데이터가 오래되지 않는 한 쿼리가 실행되지 않도록 합니다.

코드에서 알 수 있듯이 모든 변형 후 다시 가져오기를 피하기 위해 다음 다시 가져오기까지 캐시에 새 항목을 추가하기 위해 mutate에서 호출되는 함수가 있습니다.

  const id = uniqid();
  const ProjectRef = doc(db, "projects", id);
  const mutationProject = useFirestoreDocumentMutation(
    ProjectRef,
    { merge: true },
    {
      onMutate: async (newProject) => {
        // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
        await queryClient.cancelQueries("projects");
        // Snapshot the previous value
        const previousTodos = queryClient.getQueryData("projects");
        // Optimistically update to the new value
        //@ts-ignore
        queryClient.setQueryData("projects", (old) => [...old, newProject]);
        // Return a context object with the snapshotted value
        return { previousTodos };
      },
      // If the mutation fails, use the context returned from onMutate to roll back
      onError: (err, newTodo, context) => {
        //@ts-ignore
        queryClient.setQueryData("projects", context.previousTodos);
      },
      // Always refetch after error or success:
      onSettled: () => {
        queryClient.invalidateQueries("projects");
      },
    }
  );

또한 uniqid를 사용하여 내 데이터 ID를 가져오고 있음을 알 수 있습니다. 데이터를 업데이트해야 할 때 더 쉬우므로 저장된 문서의 일부로 저장하는 것이 현명합니다. 서버 측에서 쿼리할 때만 액세스할 수 있습니다.
is도 스냅샷 응답의 최상위 수준에 있으므로 useFirestoreQueryData는 액세스할 수 없습니다.

Firebase에는 데이터 변형을 위한 add() 및 set() 메서드도 있습니다.
add()에는 컬렉션 참조가 필요합니다.

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

await setDoc(doc(db, "cities", "new-city-id"), data);

set()은 내 자신의 ID를 생성하기 때문에 사용하고 있는 문서 ID가 필요한 문서 참조가 필요합니다.

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

const cityRef = doc(db, 'cities', 'BJ');
setDoc(cityRef, { capital: true }, { merge: true });

또 다른 문제는 날짜 및 Firestore 타임스탬프입니다.

export interface tyme{
  nanoseconds: number,
  seconds:number
}

그래서 "objects acnnot be react children 오류"를 피하기 위해 렌더링하기 전에 변환하는 래퍼 함수를 ​​만들었습니다.

export const toTyme =(time?:tyme)=>{
  if(time){
    const ty= new Date(
        //@ts-ignore
      time.seconds * 1000 + time.nanoseconds / 1000000

    );
    return dayjs(ty).format("DD/MM/YYYY")
 }  

  return dayjs(new Date()).format("DD/MM/YYYY")

}

그리고 그것이 될 것입니다 ,
행복한 코딩

firebase mutaion docs