Merge pull request #677 from ephemeraHQ/noe/key-based-persister-react…

…-query

Implement a key based persister for react query using mmkv

App.tsx

@@ -5,11 +5,13 @@ import { configure as configureCoinbase } from "@coinbase/wallet-mobile-sdk";
 import DebugButton from "@components/DebugButton";
 import { ActionSheetProvider } from "@expo/react-native-action-sheet";
 import { PrivyProvider } from "@privy-io/expo";
+import { queryClient } from "@queries/queryClient";
 import {
   backgroundColor,
   MaterialDarkTheme,
   MaterialLightTheme,
 } from "@styles/colors";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { useCoinbaseWalletListener } from "@utils/coinbaseWallet";
 import { converseEventEmitter } from "@utils/events";
 import logger from "@utils/logger";
@@ -34,7 +36,6 @@ import {
   runAsyncUpdates,
   updateLastVersionOpen,
 } from "./data/updates/asyncUpdates";
-import { QueryClientProvider } from "./queries/QueryProvider";
 import Main from "./screens/Main";
 import { registerBackgroundFetchTask } from "./utils/background";
 import { privySecureStorage } from "./utils/keychain/helpers";
@@ -101,7 +102,7 @@ export default function App() {
     Platform.OS === "ios" ? KeyboardProvider : React.Fragment;
 
   return (
-    <QueryClientProvider>
+    <QueryClientProvider client={queryClient}>
       <PrivyProvider appId={config.privy.appId} storage={privySecureStorage}>
         <ThirdwebProvider>
           <AppKeyboardProvider>

package.json

@@ -58,6 +58,7 @@
     "@sentry/react-native": "^5.24.1",
     "@shopify/flash-list": "1.6.4",
     "@stardazed/streams-polyfill": "^2.4.0",
+    "@tanstack/query-persist-client-core": "^5.54.1",
     "@tanstack/query-sync-storage-persister": "^5.45.0",
     "@tanstack/react-query": "^5.45.0",
     "@tanstack/react-query-persist-client": "^5.45.0",

queries/queryClient.ts

@@ -1,11 +1,18 @@
 import { QueryClient } from "@tanstack/react-query";
+import { reactQueryPersister } from "@utils/mmkv";
+
+export const GC_TIME = 1000 * 60 * 60 * 24; // 24 hours
+const STALE_TIME = 1000 * 60 * 60; // 1 hour
 
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      gcTime: 1000 * 60 * 60 * 24, // 24 hours
-      staleTime: 1000 * 60 * 60, // 1 hour
+      gcTime: GC_TIME,
+      staleTime: STALE_TIME,
       structuralSharing: false,
+      // Using a query based persister rather than persisting
+      // the whole state on each query change for performance reasons
+      persister: reactQueryPersister,
     },
   },
 });

utils/mmkv.ts

@@ -1,4 +1,5 @@
-import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import { GC_TIME } from "@queries/queryClient";
+import { experimental_createPersister } from "@tanstack/react-query-persist-client";
 import { parse, stringify } from "flatted";
 import { MMKV } from "react-native-mmkv";
 import { StateStorage } from "zustand/middleware";
@@ -50,24 +51,27 @@ export const clearSecureMmkvForAccount = async (account: string) => {
   delete secureMmkvByAccount[account];
 };
 
-const reactQueryPersister = new MMKV({ id: "converse-react-query" });
+const reactQueryMMKV = new MMKV({ id: "converse-react-query" });
 
-export const mmkvStoragePersister = createSyncStoragePersister({
-  storage: {
-    setItem: (key, value) => {
-      // Deleting before setting to avoid memory leak
-      // https://github.com/mrousavy/react-native-mmkv/issues/440
-      reactQueryPersister.delete(key);
-      reactQueryPersister.set(key, value);
-    },
-    getItem: (key) => {
-      const value = reactQueryPersister.getString(key);
-      return value === undefined ? null : value;
-    },
-    removeItem: (key) => {
-      reactQueryPersister.delete(key);
-    },
+const reactQuerySyncStorage = {
+  getItem: (key: string) => {
+    const stringValue = reactQueryMMKV.getString(key);
+    return stringValue || null;
   },
+  setItem: (key: string, value: string) => {
+    // Deleting before setting to avoid memory leak
+    // https://github.com/mrousavy/react-native-mmkv/issues/440
+    reactQueryMMKV.delete(key);
+    if (value) {
+      reactQueryMMKV.set(key, value);
+    }
+  },
+  removeItem: (key: string) => reactQueryMMKV.delete(key),
+};
+
+export const reactQueryPersister = experimental_createPersister({
+  storage: reactQuerySyncStorage,
+  maxAge: GC_TIME,
   serialize: stringify,
   deserialize: parse,
 });

yarn.lock

@@ -7755,13 +7755,25 @@
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.45.0.tgz#47a662d311c2588867341238960ec21dc7f0714e"
   integrity sha512-RVfIZQmFUTdjhSAAblvueimfngYyfN6HlwaJUPK71PKd7yi43Vs1S/rdimmZedPWX/WGppcq/U1HOj7O7FwYxw==
 
+"@tanstack/query-core@5.54.1":
+  version "5.54.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.54.1.tgz#8d6c5e6691dd023f9181d69f7f9d790f52f1bdda"
+  integrity sha512-hKS+WRpT5zBFip21pB6Jx1C0hranWQrbv5EJ7qPoiV5MYI3C8rTCqWC9DdBseiPT1JgQWh8Y55YthuYZNiw3Xw==
+
 "@tanstack/query-persist-client-core@5.45.0":
   version "5.45.0"
   resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-5.45.0.tgz#395439f8c93053a177dd483f85565a8e7d6896f5"
   integrity sha512-iAETglkRB6FR1//185TcWGnMxkisJPnCrlvIhLpHzT4eKLmh4n4vq1Cys42YIJzM2il4YWf8P4refzdq4D5Vdw==
   dependencies:
     "@tanstack/query-core" "5.45.0"
 
+"@tanstack/query-persist-client-core@^5.54.1":
+  version "5.54.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-persist-client-core/-/query-persist-client-core-5.54.1.tgz#ecf8fd55692c32f1e9962918cc91ebc3fa8a7db6"
+  integrity sha512-qmBkrC5HA3XHwwrx/pWjegncQFcmuoAaffwbrXm07OrsOxxeTGLt8aFl8RYbWAs75a8+9uneqVFQfgv5QRqxBA==
+  dependencies:
+    "@tanstack/query-core" "5.54.1"
+
 "@tanstack/query-sync-storage-persister@^5.45.0":
   version "5.45.0"
   resolved "https://registry.yarnpkg.com/@tanstack/query-sync-storage-persister/-/query-sync-storage-persister-5.45.0.tgz#a0a68745507d27d1e94a5e9a053a743250712e38"