如何使用 tanstack 查询与 firebase firestore 同步来利用 tanstack 查询的功能

Question

实际上，我是 firebase 以及反应查询的新手，我可以用它们做基本的事情，你可以说我可以告诉它们是如何工作的，并且在很大程度上我可以在项目中平均实现这两种东西，有时我需要帮助对于一些事情，这是这里的情况之一，我想利用 tanstack 查询的缓存功能和我手动通过 firestore 获取的数据，我不想使用像 React query firebase 这样的库或我想要的类似库手动使用它只是为了缓存目的，所以有人可以提供帮助吗？

我尝试过 chatgpt Gemini 和一些自定义代码，我还在 GitHub 上搜索了一些样板文件，但它们太旧了，我感觉无法完全理解它们，也尝试用 google 搜索它得到了一些博客，但它们要么难以理解，要么可以说大部分都老了

Answer 1

我在另一篇文章中用你的数据给你举了一个例子。

使用调用查询来存储并返回数据的函数

const root = ReactDOM.createRoot(document.getElementById("root"));
const queryClient = new QueryClient();
root.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

const App = () => {
  return (
    <>
      <Profile />
      {/* other components rendered */}
    </>
  );
};
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 db = firebase.firestore;
  const userRef = collection(db, "users");
  const userEmail = firebase.user?.email ?? null;
  const queryClient = useQueryClient();
  const getProfileData = async () => {
    let data = { user: null, docId: null };

    if (!userEmail) {
      //no user
      return data;
    }
    const query = query(userRef, where("Email", "==", userEmail));
    try {
      const querySnap = await getDocs(query);
      if (querySnap.empty()) {
        // no documents find
        return data;
      }
      querySnap.forEach((doc) => {
        data.user = doc.data();
        data.docId = doc.id;
      });
    } catch (error) {
      //I thinks if error throwed react-query catch them but may be
      throw error;
    }
    return data;
  };
  //staleTime con
  const { isPending, error, data } = useQuery({
    queryKey: ["userInfos"],
    queryFn: getProfileData,
    staleTime: 10 * 60 * 1000,
    initialData: () => {
      return queryClient.getQueryData(["userInfos"])?.data ?? undefined;
    },
  });
  //data loading
  if (isPending) return "Loading...";
  //error
  if (error) return "An error has occurred: " + error.message;
  //data is here
  return (
    <div>
      <h1>{data.dsiplayName}</h1>
      <p>{data.email}</p>
    </div>
  );
}

我认为您需要观看视频和更多示例来了解缓存规则和失效数据在反应查询中的工作原理。