Firestore 读取太多数据 (Ionic React) (ReactJS)

Posted 2023-03-06

【中文标题】Firestore 读取太多数据 (Ionic React) (ReactJS)

【英文标题】：Firestore reads too much data (Ionic React) (ReactJS)

【发布时间】：2020-10-06 07:54:41

【问题描述】：

所以我有这个应用程序使用 Ionic React 和 Cloud Firestore 作为数据库。大多数情况下，我使用这些代码来检索数据：

const [teacher, setTeacher] = useState('');
const history = useHistory();
const [users, setUsers] = useState([]);

async function obtainData() 
    const querySnapshot = db.collection('TEACHER_DATA').where('email', '==', Cookies.get('email'));
    const awaitSnapshot = await querySnapshot.get();
    const data = awaitSnapshot.docs.map(doc => doc.data().name);
    setTeacher(String(data));

    const querySnapshot2 = db.collection('CLASS').where('class_teacher', '==', teacher);
    const awaitSnapshot2 = await querySnapshot2.get();
    const data2 = awaitSnapshot2.docs.map(doc => doc.data());
    setUsers(data2);


obtainData();

return (
    <div>
        users.map((value: any, index) => (
                <IonCard key=index onClick=() => 
                    Cookies2.set('id', value.student_id);
                    history.push(
                        pathname: '/Student_biodata',
                        state: value.student_id
                    )
                   class="students">
                      <IonCardTitle>
                          value.class_student
                      </IonCardTitle>
                    value.branch
                    <IonCard id="mini-picture">
                        <IonImg src='/assets/propic/' + value.student_id + '.jpg'></IonImg>
                    </IonCard>
                    
                </IonCard>
            ))
    </div>
);

这段代码显示了我需要的数据。但是，当我检查 Firestore 使用情况时，在 15 分钟内它已经有 6K 读取。如果有一天用户数量正在增加，这不合适。我的应用很快就会达到每日限额。我的 Firestore 项目中的文档少于 30 个。

我有什么解决方案可以减少 Firestore 中的阅读量吗？是否有任何示例可以在 NoSQL Firestore 中创建更好的结构以减少读取？ 我看过 Firebase 关于 Firestore 的教程视频，但还是不明白。

【问题讨论】：

我强烈推荐阅读NoSQL data modeling 并观看Getting to know Cloud Firestore 系列。

【参考方案1】：

问题是您在页面的每次渲染时都调用obtainData，而不是在页面加载时调用一次。您可以使用useEffect 来实现类似于componentDidMount 的功能

useEffect(()=>
  obtainData();
,[]);

如果您希望仅在参数之一更改时发生调用，请参阅有关有条件触发效果的文档 https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

【讨论】：

效果很好！谢谢你！

【参考方案2】：

没有特定的最佳方法来减少 Firestore 中的读取，因为这完全取决于您的应用程序。例如，对于 android、ios 和 Web 应用程序，Firestore 支持 offline data，因此您可以缓存数据以供使用，而无需每次都执行 get 和访问您的数据库 - 您可以获取示例 here。

总而言之，没有更好或更正确的方式来构建数据库或查询，因为它们需要满足您的需求以及您对应用程序的需求，因此，它始终取决于您。考虑到这一点，我建议您查看上述链接以及类似的案例here，您可以在其中找到缓存数据的示例以减少数据库中的读取，就像您的应用程序一样，似乎@ 987654324@ 子句与静态值进行比较。