如何在react中缓存firestore数据库中的数据

Question

实际上我正在开发我的一个项目，我发现每次我开车回到我的数据显示页面时都会加载我的数据，它没有缓存或已预加载，而且在发布这个问题之前我已经使用了一些东西，例如 getDocsFromCache ，它是其他启用该功能的设置我也尝试过使用 Gemini 和 chatgpt 但它们对此也不好，我无法这样做，这里有人可以给我实际正确执行该操作的步骤

这是我的示例代码，目前每次我在一段时间后返回页面时都会获取它，并在每次导航回页面时显示硬加载状态后的数据，我希望它仅在以下情况下显示硬加载我最初第一次打开页面，之后当我导航回来时，它应该预加载数据，或者您可以说已缓存并显示缓存中的所有数据

这是我的组件

function Profile() {
 //My custom hook that I created to access the firebase settings and all its functions that i created or are precreated 

  const firebase = useFirebase();
const userRef = collection(firebase.firestore, "users");
const [userData, setUserData] = useState(null);
const [docId, setDocId] = useState(null);

  const getProfileData = async () => {
    if (firebase.user?.email) {
      const unsubscribe = await getDocs(userRef)
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            if (doc.data().Email === firebase.user?.email) {
              setUserData(doc.data());              

  /*setDocId("'" + doc._key.path.segments[6] + "'")  ;   */

       console.log(doc)          /*console.log("Current user data:", doc.data());*/
            }
          });
        })
        .catch((error) => {
          console.error("Error fetching user data:", error);
        });

      return unsubscribe;
    }
  };

  /*const docRef = doc(firebase.firestore, "users", docId);*/

  // Fetch data only if userData is null, preventing unnecessary calls

  /*console.log(userData);*/

useEffect(() => {
  getProfileData();
},[])

    /*console.log(userData);*/

  return (
    <>
      <div className='h-screen w-screen bg-white-900 flex justify-center items-center'>
        <div className='Profile-frame bg-[#740ceb] card-shadow rounded-lg flex  flex-wrap'>
          <div className='bg-white Profile-Img-frame rounded-lg card-shadow m-5 ml-2 mr-0 mb-0 flex justify-center items-center '>
            <FontAwesomeIcon icon={faUser} size='7x' style={{ color: '#740ceb' }} className=' flex items-center justify-center  rounded-lg ' />
          </div>
          <div className='Profile-Text-frame ml-4 mt-5'>

    {userData ? (
      <>
                   {(userData?.ProMember) && (
            <div className='bg-[#FFFFFF]  text-[#740ceb] rounded-lg font-bold w-40 p-0.5 text-center mb-2'> 🌟 ProMemberShip </div> )}
            <div className='text-white text-4xl font-bold'> {userData?.Name} </div>
            <div className='fontsize-15px text-white mt-1'>{userData?.Email}</div>
            {(userData?.ProMember === false) && (<button className='bg-[#FFFFFF] text-[#740ceb] rounded-lg button-shadow Upgrade-frame font-bold m-5 ml-3 mt-6 ' onClick={() => To('/ProMember')} >🌟  Upgrade to Pro ✨ </button>)}
      </>
    ):(
      <>
        <div cl> assName = 'text-[#FFFFFF] font-bold '> ...Loading </div>
      </>
    ) }        
          </div>
        </div>
      </div>
    </>
  )
}

帮我缓存我想要在这里显示或使用的数据

正如我所说，我已经尝试过 Ai 工具和 firebase 文档来解决此问题，但仍然面临问题

Answer 1

要指定 Web sdk 的行为，您首先需要（在 firebase-config.js 文件或应用程序的主入口点中）

使用特定规则初始化 firestore。

firebase 文档

//firebase-config.js

initializeFirestore(app, 
  {localCache: 
    persistentLocalCache({tabManager: persistentSingleTabManager()})

});

查看文档您还有其他可用设置。

仅此而已，默认情况下，如果您需要数据并且您的设备处于离线状态，您可以从缓存中获取数据。

不要忘记，当您使用“getDocsFromCache()”时，无法保证数据的新鲜度，这取决于数据的类型，系统地检索新鲜数据或在发出最后一个实际请求时保存时间戳可能是个好主意并相应地从缓存切换到网络。