解決したいこと
タイトル通りfirestoreの読み取り回数を削減したいです
発生している問題・エラー
作業し始めて2時間ほどで読み取り回数が4万になっていることに気づきました。
該当するソースコード
触っていたのは１ファイルのみなので以下のソースの中に問題があると思います。
特にTodoリスト、コメント表示の処理だろうとは思うのですが
どのようにアプローチしたらいいかがわからず解決する前に無料枠を超えてしまいました。
// import 略
const Show = () => {
// id
const pathname = usePathname();
const segments = pathname.split("/");
const id = segments[segments.length - 1];
// State
const [todos, setTodos] = useState([]);
const [comments, setComments] = useState([]);
const { isOpen, onOpen, onClose } = useDisclosure();
// Todoリスト
const postsCol = collection(db, "posts");
const queryRef = query(postsCol, where("Id", "==", id));
(async () => {
try {
const querySnapshot = await getDocs(queryRef);
const todoDocObj = querySnapshot.docs[0];
if (todoDocObj) {
const data = todoDocObj.data();
const formattedCreate = format(data.Create.toDate(), "yyyy-MM-dd HH:mm");
const formattedUpdate = format(data.Update.toDate(), "yyyy-MM-dd HH:mm");
setTodos({
Create: formattedCreate,
Detail: data.Detail,
Task: data.Task,
Update: formattedUpdate,
});
}
} catch (error) {
// console.log(error);
}
})();
// コメント表示
const fetchComment = async () => {
try {
const cmtCol = collection(db, "comments");
const cmtQueryRef = query(cmtCol, where("Id", "==", id), orderBy("commentCreate", "desc"));
getDocs(cmtQueryRef).then((cmtSnapShot) => {
const cmtObj = cmtSnapShot.docs.map((doc) => {
return {
commentName: doc.data().commentName,
commentDetail: doc.data().commentDetail,
commentCreate: format(doc.data().commentCreate.toDate(), "yyyy-MM-dd HH:mm"),
};
});
setComments(cmtObj);
});
} catch (error) {
console.log(error);
}
};
useEffect(() => {
fetchComment();
}, []);
// コメント追加
const addComment = async (e) => {
e.preventDefault();
try {
const { commentName, commentDetail } = e.target.elements;
const newComment = doc(collection(db, "comments"));
const comdetail = commentDetail.value;
const comname = commentName.value;
await setDoc(newComment, {
Id: id,
commentCreate: Timestamp.now(),
commentDetail: comdetail,
commentId: newComment.id,
commentName: comname,
});
e.target.reset();
onClose();
fetchComment();
} catch (error) {
// console.log(error);
}
};
return(<>略</>)
}
実装中の機能
１todo読み込み ページidと紐づいたtodoデータを表示する（Todoリスト）
２コメント読み込み ページidと紐づいたコメントデータを表示する（コメント表示）
３モーダル表示
４コメント投稿（コメント追加）
自分で試したこと
１リロードでどれくらいアクセスがあるか３回ほどテストできましたが、
１リロード1000以上カウントされていました。
補足
コレクションは２つ、登録されているドキュメント数も5件以下なのでデータが多いということはない認識です。
