feat(bootstrap): Switch to PersistQueryClientProvider

In #89139 @TkDodo recommended we use the PersistQueryClientProvider instead of the isRestoring states it provides. Adds a function that checks if the feature is enabled.

Author: scttcper

static/app/appQueryClient.tsx

@@ -1,9 +1,13 @@
 import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister';
-import {persistQueryClient} from '@tanstack/react-query-persist-client';
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client';
 import {del as removeItem, get as getItem, set as setItem} from 'idb-keyval';
 
 import {SENTRY_RELEASE_VERSION} from 'sentry/constants';
-import {DEFAULT_QUERY_CLIENT_CONFIG, QueryClient} from 'sentry/utils/queryClient';
+import {
+  DEFAULT_QUERY_CLIENT_CONFIG,
+  QueryClient,
+  QueryClientProvider,
+} from 'sentry/utils/queryClient';
 
 /**
  * Named it appQueryClient because we already have a queryClient in sentry/utils/queryClient
@@ -13,10 +17,10 @@ import {DEFAULT_QUERY_CLIENT_CONFIG, QueryClient} from 'sentry/utils/queryClient
  * Instead, use `const queryClient = useQueryClient()`.
  * @link https://tanstack.com/query/v5/docs/reference/QueryClient
  */
-export const appQueryClient = new QueryClient(DEFAULT_QUERY_CLIENT_CONFIG);
+const appQueryClient = new QueryClient(DEFAULT_QUERY_CLIENT_CONFIG);
 const cacheKey = 'sentry-react-query-cache';
 
-const localStoragePersister = createAsyncStoragePersister({
+const indexedDbPersister = createAsyncStoragePersister({
   // We're using indexedDB as our storage provider because projects cache can be large
   storage: {getItem, setItem, removeItem},
   // Reduce the frequency of writes to indexedDB
@@ -32,45 +36,50 @@ const isProjectsCacheEnabled =
   );
 
 /**
- * Attach the persister to the query client
- * @link https://tanstack.com/query/latest/docs/framework/react/plugins/persistQueryClient
+ * Enables the PersistQueryClientProvider when the flag is enabled
  */
-if (isProjectsCacheEnabled) {
-  persistQueryClient({
-    queryClient: appQueryClient,
-    persister: localStoragePersister,
-    /**
-     * Clear cache on release version change
-     * Locally this does nothing, if you need to clear cache locally you can clear indexdb
-     */
-    buster: SENTRY_RELEASE_VERSION ?? 'local',
-    dehydrateOptions: {
-      // Persist a subset of queries to local storage
-      shouldDehydrateQuery(query) {
-        // This could be extended later to persist other queries
-        return (
-          // Query is not pending or failed
-          query.state.status === 'success' &&
-          !query.isStale() &&
-          Array.isArray(query.queryKey) &&
-          // Currently only bootstrap-projects is persisted
-          query.queryKey[0] === 'bootstrap-projects'
-        );
-      },
-    },
-  });
-}
-
-export function restoreQueryCache() {
-  if (isProjectsCacheEnabled) {
-    localStoragePersister.restoreClient();
+export function AppQueryClientProvider({children}: {children: React.ReactNode}) {
+  if (!isProjectsCacheEnabled) {
+    return <QueryClientProvider client={appQueryClient}>{children}</QueryClientProvider>;
   }
+
+  return (
+    <PersistQueryClientProvider
+      client={appQueryClient}
+      persistOptions={{
+        persister: indexedDbPersister,
+        /**
+         * Clear cache on release version change
+         * Locally this does nothing, if you need to clear cache locally you can clear indexdb
+         */
+        buster: SENTRY_RELEASE_VERSION ?? 'local',
+        dehydrateOptions: {
+          // Persist a subset of queries to local storage
+          shouldDehydrateQuery(query) {
+            // This could be extended later to persist other queries
+            return (
+              // Query is not pending or failed
+              query.state.status === 'success' &&
+              !query.isStale() &&
+              // Currently only bootstrap-projects is persisted
+              query.queryKey[0] === 'bootstrap-projects'
+            );
+          },
+        },
+      }}
+    >
+      {children}
+    </PersistQueryClientProvider>
+  );
 }
 
 export async function clearQueryCache() {
   if (isProjectsCacheEnabled) {
-    // Mark queries as stale so they won't be recached
-    appQueryClient.invalidateQueries({queryKey: ['bootstrap-projects']});
+    // Mark queries as stale so they won't be re-cached
+    appQueryClient.invalidateQueries({
+      queryKey: ['bootstrap-projects'],
+      refetchType: 'none',
+    });
     await removeItem(cacheKey);
   }
 }

static/app/bootstrap/initializeApp.tsx

@@ -1,7 +1,6 @@
 import './legacyTwitterBootstrap';
 import './exportGlobals';
 
-import {restoreQueryCache} from 'sentry/appQueryClient';
 import type {Config} from 'sentry/types/system';
 import {metric} from 'sentry/utils/analytics';
 
@@ -12,7 +11,6 @@ import {renderMain} from './renderMain';
 import {renderOnDomReady} from './renderOnDomReady';
 
 export function initializeApp(config: Config) {
-  restoreQueryCache();
   commonInitialization(config);
   initializeSdk(config);
 

static/app/main.tsx

@@ -3,13 +3,12 @@ import {createBrowserRouter, RouterProvider} from 'react-router-dom';
 import {wrapCreateBrowserRouterV6} from '@sentry/react';
 import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
-import {appQueryClient} from 'sentry/appQueryClient';
+import {AppQueryClientProvider} from 'sentry/appQueryClient';
 import {OnboardingContextProvider} from 'sentry/components/onboarding/onboardingContext';
 import {ThemeAndStyleProvider} from 'sentry/components/themeAndStyleProvider';
 import {USE_REACT_QUERY_DEVTOOL} from 'sentry/constants';
 import {routes} from 'sentry/routes';
 import {DANGEROUS_SET_REACT_ROUTER_6_HISTORY} from 'sentry/utils/browserHistory';
-import {QueryClientProvider} from 'sentry/utils/queryClient';
 
 import {buildReactRouter6Routes} from './utils/reactRouter6Compat/router';
 
@@ -25,7 +24,7 @@ function Main() {
   const [router] = useState(buildRouter);
 
   return (
-    <QueryClientProvider client={appQueryClient}>
+    <AppQueryClientProvider>
       <ThemeAndStyleProvider>
         <OnboardingContextProvider>
           <RouterProvider router={router} />
@@ -34,7 +33,7 @@ function Main() {
           <ReactQueryDevtools initialIsOpen={false} buttonPosition="bottom-left" />
         )}
       </ThemeAndStyleProvider>
-    </QueryClientProvider>
+    </AppQueryClientProvider>
   );
 }