fix: query key is made dyanmic (#2735)

frontend/src/container/AppLayout/index.tsx

@@ -27,7 +27,9 @@ import AppReducer from 'types/reducer/app';
 import { ChildrenContainer, Layout } from './styles';
 
 function AppLayout(props: AppLayoutProps): JSX.Element {
-	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { isLoggedIn, user } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
 	const { pathname } = useLocation();
 	const { t } = useTranslation();
 
@@ -39,21 +41,21 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	] = useQueries([
 		{
 			queryFn: getUserVersion,
-			queryKey: 'getUserVersion',
+			queryKey: ['getUserVersion', user?.accessJwt],
 			enabled: isLoggedIn,
 		},
 		{
 			queryFn: getUserLatestVersion,
-			queryKey: 'getUserLatestVersion',
+			queryKey: ['getUserLatestVersion', user?.accessJwt],
 			enabled: isLoggedIn,
 		},
 		{
 			queryFn: getFeaturesFlags,
-			queryKey: 'getFeatureFlags',
+			queryKey: ['getFeatureFlags', user?.accessJwt],
 		},
 		{
 			queryFn: getDynamicConfigs,
-			queryKey: 'getDynamicConfigs',
+			queryKey: ['getDynamicConfigs', user?.accessJwt],
 		},
 	]);
 

frontend/src/container/GeneralSettings/index.tsx

@@ -4,9 +4,12 @@ import getRetentionPeriodApi from 'api/settings/getRetention';
 import Spinner from 'components/Spinner';
 import { useTranslation } from 'react-i18next';
 import { useQueries } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { TTTLType } from 'types/api/settings/common';
 import { PayloadProps as GetRetentionPeriodAPIPayloadProps } from 'types/api/settings/getRetention';
+import AppReducer from 'types/reducer/app';
 
 import GeneralSettingsContainer from './GeneralSettings';
 
@@ -16,6 +19,7 @@ type TRetentionAPIReturn<T extends TTTLType> = Promise<
 
 function GeneralSettings(): JSX.Element {
 	const { t } = useTranslation('common');
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
 
 	const [
 		getRetentionPeriodMetricsApiResponse,
@@ -26,20 +30,20 @@ function GeneralSettings(): JSX.Element {
 		{
 			queryFn: (): TRetentionAPIReturn<'metrics'> =>
 				getRetentionPeriodApi('metrics'),
-			queryKey: 'getRetentionPeriodApiMetrics',
+			queryKey: ['getRetentionPeriodApiMetrics', user?.accessJwt],
 		},
 		{
 			queryFn: (): TRetentionAPIReturn<'traces'> =>
 				getRetentionPeriodApi('traces'),
-			queryKey: 'getRetentionPeriodApiTraces',
+			queryKey: ['getRetentionPeriodApiTraces', user?.accessJwt],
 		},
 		{
 			queryFn: (): TRetentionAPIReturn<'logs'> => getRetentionPeriodApi('logs'),
-			queryKey: 'getRetentionPeriodApiLogs',
+			queryKey: ['getRetentionPeriodApiLogs', user?.accessJwt],
 		},
 		{
 			queryFn: getDisks,
-			queryKey: 'getDisks',
+			queryKey: ['getDisks', user?.accessJwt],
 		},
 	]);
 

frontend/src/container/Login/index.tsx

@@ -9,7 +9,10 @@ import history from 'lib/history';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
 import { PayloadProps as PrecheckResultType } from 'types/api/user/loginPrecheck';
+import AppReducer from 'types/reducer/app';
 
 import { FormContainer, FormWrapper, Label, ParentContainer } from './styles';
 
@@ -34,6 +37,7 @@ function Login({
 }: LoginProps): JSX.Element {
 	const { t } = useTranslation(['login']);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
 
 	const [precheckResult, setPrecheckResult] = useState<PrecheckResultType>({
 		sso: false,
@@ -49,7 +53,7 @@ function Login({
 
 	const getUserVersionResponse = useQuery({
 		queryFn: getUserVersion,
-		queryKey: 'getUserVersion',
+		queryKey: ['getUserVersion', user?.accessJwt],
 		enabled: true,
 	});
 

frontend/src/container/OrganizationSettings/Members/index.tsx

@@ -236,7 +236,7 @@ function Members(): JSX.Element {
 			getOrgUser({
 				orgId: (org || [])[0].id,
 			}),
-		queryKey: 'getOrgUser',
+		queryKey: ['getOrgUser', org?.[0].id],
 	});
 
 	const [dataSource, setDataSource] = useState<DataType[]>([]);

frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx

@@ -11,9 +11,12 @@ import { useNotifications } from 'hooks/useNotifications';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
+import { AppState } from 'store/reducers';
 import { PayloadProps } from 'types/api/user/getPendingInvites';
+import AppReducer from 'types/reducer/app';
 import { ROLES } from 'types/roles';
 
 import InviteTeamMembers from '../InviteTeamMembers';
@@ -28,6 +31,7 @@ function PendingInvitesContainer(): JSX.Element {
 	const { t } = useTranslation(['organizationsettings', 'common']);
 	const [state, setText] = useCopyToClipboard();
 	const { notifications } = useNotifications();
+	const { user } = useSelector<AppState, AppReducer>((state) => state.app);
 
 	useEffect(() => {
 		if (state.error) {
@@ -46,8 +50,8 @@ function PendingInvitesContainer(): JSX.Element {
 	}, [state.error, state.value, t, notifications]);
 
 	const getPendingInvitesResponse = useQuery({
-		queryFn: () => getPendingInvites(),
-		queryKey: 'getPendingInvites',
+		queryFn: getPendingInvites,
+		queryKey: ['getPendingInvites', user?.accessJwt],
 	});
 
 	const toggleModal = (value: boolean): void => {

frontend/src/pages/Login/index.tsx

@@ -23,7 +23,7 @@ function Login(): JSX.Element {
 
 	const versionResult = useQuery({
 		queryFn: getUserVersion,
-		queryKey: 'getUserVersion',
+		queryKey: ['getUserVersion', jwt],
 		enabled: !isLoggedIn,
 	});
 

frontend/src/pages/ResetPassword/index.tsx

@@ -10,12 +10,14 @@ import AppReducer from 'types/reducer/app';
 
 function ResetPassword(): JSX.Element {
 	const { t } = useTranslation('common');
-	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { isLoggedIn, user } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
 
 	const [versionResponse] = useQueries([
 		{
 			queryFn: getUserVersion,
-			queryKey: 'getUserVersion',
+			queryKey: ['getUserVersion', user?.accessJwt],
 			enabled: !isLoggedIn,
 		},
 	]);

frontend/src/pages/SignUp/SignUp.tsx

@@ -62,7 +62,7 @@ function SignUp({ version }: SignUpProps): JSX.Element {
 			getInviteDetails({
 				inviteId: token || '',
 			}),
-		queryKey: 'getInviteDetails',
+		queryKey: ['getInviteDetails', token],
 		enabled: token !== null,
 	});
 

frontend/src/pages/SignUp/index.tsx

@@ -11,12 +11,14 @@ import SignUpComponent from './SignUp';
 
 function SignUp(): JSX.Element {
 	const { t } = useTranslation('common');
-	const { isLoggedIn } = useSelector<AppState, AppReducer>((state) => state.app);
+	const { isLoggedIn, user } = useSelector<AppState, AppReducer>(
+		(state) => state.app,
+	);
 
 	const [versionResponse] = useQueries([
 		{
 			queryFn: getUserVersion,
-			queryKey: 'getUserVersion',
+			queryKey: ['getUserVersion', user?.accessJwt],
 			enabled: !isLoggedIn,
 		},
 	]);