diff --git a/frontend/libs/console/legacy-ce/src/lib/Globals.ts b/frontend/libs/console/legacy-ce/src/lib/Globals.ts index feccb7097d8..d9bcee32ae4 100644 --- a/frontend/libs/console/legacy-ce/src/lib/Globals.ts +++ b/frontend/libs/console/legacy-ce/src/lib/Globals.ts @@ -8,8 +8,7 @@ import { isEmpty } from './components/Common/utils/jsUtils'; import { stripTrailingSlash } from './components/Common/utils/urlUtils'; import { SERVER_CONSOLE_MODE } from './constants'; -import { parseConsoleType, ConsoleType } from './utils/envUtils'; -import { QueryClient } from 'react-query'; +import { ConsoleType, parseConsoleType } from './utils/envUtils'; export type LuxFeature = | 'DatadogIntegration' @@ -180,7 +179,6 @@ export type EnvVars = { declare global { interface Window extends GlobalWindowHeap { __env: EnvVars; - reactQueryClient: QueryClient; } const CONSOLE_ASSET_VERSION: string; } diff --git a/frontend/libs/console/legacy-ce/src/lib/lib/reactQuery.tsx b/frontend/libs/console/legacy-ce/src/lib/lib/reactQuery.tsx index 60902a2de44..64d1dac90d2 100644 --- a/frontend/libs/console/legacy-ce/src/lib/lib/reactQuery.tsx +++ b/frontend/libs/console/legacy-ce/src/lib/lib/reactQuery.tsx @@ -4,12 +4,6 @@ import { ReactQueryDevtools } from 'react-query/devtools'; export const reactQueryClient = new QueryClient(); -/** - * This is needed by the redux store to trigger - * invalidate queries when the metadata is updated in the store. - */ -window.reactQueryClient = reactQueryClient; - export const ReactQueryProvider: React.FC = ({ children }) => ( {children} diff --git a/frontend/libs/console/legacy-ce/src/lib/store.utils.ts b/frontend/libs/console/legacy-ce/src/lib/store.utils.ts index 45df1feab42..83f36043d12 100644 --- a/frontend/libs/console/legacy-ce/src/lib/store.utils.ts +++ b/frontend/libs/console/legacy-ce/src/lib/store.utils.ts @@ -1,20 +1,47 @@ import { ToolkitStore } from '@reduxjs/toolkit/dist/configureStore'; +import { reactQueryClient } from './lib/reactQuery'; +import { Metadata } from './features/hasura-metadata-types'; +import { METADATA_QUERY_KEY } from './features/hasura-metadata-api/useMetadata'; -let previousStore: any = null; export const listenForStoreMetadataChanges = (store: ToolkitStore) => { + let previousStore: any = null; + store.subscribe(() => { - if (!previousStore) { + if (!previousStore || previousStore?.metadata?.metadataObject == null) { previousStore = store.getState(); return; } + const currentStore = store.getState(); + + const reactQueryResourceVersion = + reactQueryClient.getQueryData( + METADATA_QUERY_KEY + )?.resource_version; + if ( currentStore?.metadata?.resourceVersion > - previousStore?.metadata?.resourceVersion + previousStore?.metadata?.resourceVersion && + currentStore?.metadata?.resourceVersion !== reactQueryResourceVersion ) { - window.reactQueryClient.invalidateQueries('export_metadata'); + console.groupCollapsed( + 'Metadata change occurred in redux, and is no longer in sync with react-query:' + ); + + console.info( + `current redux store rv: ${currentStore?.metadata?.resourceVersion}` + ); + console.info( + `previous redux store rv: ${previousStore?.metadata?.resourceVersion}` + ); + console.info(`react query rv: ${reactQueryResourceVersion}`); + console.info( + `Triggering react-query invalidation of query key: ${METADATA_QUERY_KEY}` + ); + console.groupEnd(); + reactQueryClient.invalidateQueries(METADATA_QUERY_KEY); } - previousStore = store.getState(); + previousStore = currentStore; }); };