缓存

import { dehydrate, hydrate, createQueryClient } from "quaere";
 
export const queryClient = createQueryClient();
 
// 初始化时，我们将数据从 `localStorage` 恢复到一个 queryClient 中。
hydrate(queryClient, JSON.parse(localStorage.getItem("app-cache") || "{}"));
 
// 在卸载 app 之前，我们将所有数据写回 `localStorage` 中。
window.addEventListener("beforeunload", () => {
  // 注意：必须手动设置 query 的 key，dehydrate 才不会过滤掉该query
  const appCache = dehydrate(queryClient);
  localStorage.setItem("app-cache", appCache);
});

import { use, useEffect } from "react";
import {
  HydrationBoundary,
  QueryClientProvider,
  queryClient,
  QueryClientProvider,
} from "quaere";
import AsyncStorage from "@react-native-async-storage/async-storage";
 
const getAppCachePromise = AsyncStorage.getItem("app-cache")
  .then((cache) => JSON.parse(cache ?? "null"))
  .catch(() => null);
 
export function AsyncStoragePersist({ children }: { children: ReactNode }) {
  const appCache = use(getAppCachePromise);
  const queryClient = useQueryClient();
 
  useEffect(() => {
    const timer = setInterval(() => {
      AsyncStorage.setItem("app-cache", JSON.stringify(dehydrate(queryClient)));
    }, 1000);
 
    return () => {
      clearTimeout(timer);
    };
  }, [queryClient]);
 
  return <HydrationBoundary state={appCache}>{children}</HydrationBoundary>;
}
 
export const queryClient = createQueryClient();
 
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Suspense>
        <AsyncStoragePersistProvider>
          <Page />
        </AsyncStoragePersistProvider>
      </Suspense>
    </QueryClientProvider>
  );
}