store data version as part of search cache

js_modules/dagster-ui/packages/ui-core/src/search/useGlobalSearch.tsx

@@ -259,10 +259,11 @@ type IndexBuffer = {
   cancel: () => void;
 };
 
-// This is the version of the secondary query, used as part of the cache key.
-// When the data in the cache must be invalidated, this version should be bumped to prevent
-// fetching stale data.
-export const SEARCH_SECONDARY_DATA_VERSION = 'v1;';
+// These are the versions of the primary and secondary data queries. They are used to
+// version the cache in indexedDB. When the data in the cache must be invalidated, this version
+// should be bumped to prevent fetching stale data.
+export const SEARCH_PRIMARY_DATA_VERSION = 1;
+export const SEARCH_SECONDARY_DATA_VERSION = 1;
 
 /**
  * Perform global search populated by two lazy queries, to be initialized upon some
@@ -289,6 +290,7 @@ export const useGlobalSearch = ({includeAssetFilters}: {includeAssetFilters: boo
   } = useIndexedDBCachedQuery<SearchPrimaryQuery, SearchPrimaryQueryVariables>({
     query: SEARCH_PRIMARY_QUERY,
     key: 'SearchPrimary',
+    version: SEARCH_PRIMARY_DATA_VERSION,
   });
 
   const {
@@ -297,7 +299,8 @@ export const useGlobalSearch = ({includeAssetFilters}: {includeAssetFilters: boo
     loading: secondaryDataLoading,
   } = useIndexedDBCachedQuery<SearchSecondaryQuery, SearchSecondaryQueryVariables>({
     query: SEARCH_SECONDARY_QUERY,
-    key: `SearchSecondary:${SEARCH_SECONDARY_DATA_VERSION}`,
+    key: 'SearchSecondary',
+    version: SEARCH_SECONDARY_DATA_VERSION,
   });
 
   const consumeBufferEffect = useCallback(

js_modules/dagster-ui/packages/ui-core/src/search/useIndexedDBCachedQuery.tsx

@@ -4,23 +4,30 @@ import React from 'react';
 
 const ONE_WEEK = 1000 * 60 * 60 * 24 * 7;
 
+type CacheData<TQuery> = {
+  data: TQuery;
+  version: number;
+};
+
 /**
  * Returns data from the indexedDB cache initially while loading is true.
  * Fetches data from the network/cache initially and does not receive any updates afterwards
  */
 export function useIndexedDBCachedQuery<TQuery, TVariables extends OperationVariables>({
   key,
   query,
+  version,
   variables,
 }: {
   key: string;
   query: DocumentNode;
+  version: number;
   variables?: TVariables;
 }) {
   const client = useApolloClient();
 
   const lru = React.useMemo(
-    () => cache<string, TQuery>({dbName: `indexdbQueryCache:${key}`, maxCount: 1}),
+    () => cache<string, CacheData<TQuery>>({dbName: `indexdbQueryCache:${key}`, maxCount: 1}),
     [key],
   );
 
@@ -33,11 +40,13 @@ export function useIndexedDBCachedQuery<TQuery, TVariables extends OperationVari
       if (await lru.has('cache')) {
         const {value} = await lru.get('cache');
         if (value) {
-          setData(value);
+          if (version === (value.version || null)) {
+            setData(value.data);
+          }
         }
       }
     })();
-  }, [lru]);
+  }, [lru, version]);
 
   const didFetch = React.useRef(false);
 
@@ -55,11 +64,15 @@ export function useIndexedDBCachedQuery<TQuery, TVariables extends OperationVari
       variables,
     });
     setLoading(false);
-    lru.set('cache', data, {
-      expiry: new Date(Date.now() + ONE_WEEK),
-    });
+    lru.set(
+      'cache',
+      {data, version},
+      {
+        expiry: new Date(Date.now() + ONE_WEEK),
+      },
+    );
     setData(data);
-  }, [client, lru, query, variables]);
+  }, [client, lru, query, variables, version]);
 
   return {
     fetch,