fix: Database tab refresh

We’ll use query keys more consistently now, busting the right thing at the right time. I also simplified the database/table to be a single route with optional params, and a component render-time route replacement. This makes the caching more consistent. Restarting the cluster now properly invalidates the database page’s cache, as a result.

https://harperdb.atlassian.net/browse/STUDIO-478

Author: dawsontoth

src/features/auth/ClusterInstanceSignIn.tsx

@@ -10,6 +10,7 @@ import { Input } from '@/components/ui/input';
 import { activeClusterStatuses } from '@/config/clusterStatuses';
 import { defaultInstanceRoute, defaultInstanceRouteUpOne, isLocalStudio } from '@/config/constants';
 import { useInstanceClientIdParams } from '@/config/useInstanceClient';
+import { currentUserQueryKey } from '@/features/auth/queries/getCurrentUser';
 import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getClusterInfoQuery';
 import { useInstanceLoginMutation } from '@/features/instance/operations/mutations/useInstanceLoginMutation';
 import { getInstanceHealthQueryOptions } from '@/features/instance/operations/queries/getInstanceHealth';
@@ -19,7 +20,6 @@ import { authStore, OverallAppSignIn } from '@/lib/authStore';
 import { CrossLocalhostIssueType, detectCrossLocalhostUrls } from '@/lib/urls/detectCrossLocalhostUrls';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
-import { queryKeys } from '@/react-query/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Navigate, useNavigate, useParams, useRouter, useSearch } from '@tanstack/react-router';
@@ -97,7 +97,7 @@ export function ClusterInstanceSignIn() {
 						}
 					}
 					authStore.setUserForEntity(instance || cluster || OverallAppSignIn, user);
-					void queryClient.invalidateQueries({ queryKey: [queryKeys.user], refetchType: 'none' });
+					void queryClient.invalidateQueries({ queryKey: currentUserQueryKey, refetchType: 'none' });
 					void router.invalidate();
 					await navigate({
 						to: redirect?.startsWith('/')

src/features/auth/SignIn.tsx

@@ -7,13 +7,13 @@ import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
 import { Input } from '@/components/ui/input';
 import { useLoginMutation } from '@/features/auth/hooks/useSignIn';
+import { currentUserQueryKey } from '@/features/auth/queries/getCurrentUser';
 import { reoClient } from '@/integrations/reo/reo';
 import { authStore, OverallAppSignIn } from '@/lib/authStore';
 import { parseCompanyFromEmail } from '@/lib/string/parseCompanyFromEmail';
 import { getDefaultSignedInCloudRouteForUser } from '@/lib/urls/getDefaultSignedInCloudRouteForUser';
 import { zodRequireEmail } from '@/lib/zod/email';
 import { zodRequirePassword } from '@/lib/zod/password';
-import { queryKeys } from '@/react-query/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate, useRouter, useSearch } from '@tanstack/react-router';
@@ -65,7 +65,7 @@ export function SignIn() {
 					type: 'email',
 					...(company ? { company } : {}),
 				});
-				await queryClient.invalidateQueries({ queryKey: [queryKeys.user], refetchType: 'none' });
+				await queryClient.invalidateQueries({ queryKey: currentUserQueryKey, refetchType: 'none' });
 				void router.invalidate();
 				await navigate({ to: redirect?.startsWith('/') ? redirect : defaultCloudRoute });
 			},

src/features/auth/queries/getCurrentUser.ts

@@ -1,6 +1,5 @@
 import { User } from '@/lib/api.patch';
 import { apiClient } from '@/config/apiClient';
-import { queryKeys } from '@/react-query/constants';
 import { queryOptions } from '@tanstack/react-query';
 
 export async function getCurrentUser(): Promise<User> {
@@ -9,9 +8,11 @@ export async function getCurrentUser(): Promise<User> {
 	return data as unknown as User;
 }
 
+export const currentUserQueryKey = ['current-user'];
+
 export function getCurrentUserQueryOptions() {
 	return queryOptions({
-		queryKey: [queryKeys.user],
+		queryKey: currentUserQueryKey,
 		queryFn: getCurrentUser,
 		retry: false,
 	});

src/features/cluster/queries/getClusterInfoQuery.ts

@@ -1,6 +1,5 @@
 import { apiClient } from '@/config/apiClient';
 import { Cluster } from '@/lib/api.patch';
-import { queryKeys } from '@/react-query/constants';
 import { queryOptions } from '@tanstack/react-query';
 
 export async function getClusterInfo(clusterId: string) {
@@ -10,7 +9,7 @@ export async function getClusterInfo(clusterId: string) {
 
 export function getClusterInfoQueryOptions(clusterId?: string | false, refetch?: boolean | number) {
 	return queryOptions({
-		queryKey: [queryKeys.cluster, clusterId],
+		queryKey: [clusterId],
 		queryFn: () => getClusterInfo(clusterId as string),
 		retry: false,
 		enabled: !!clusterId,

src/features/cluster/queries/getInstanceInfoQuery.ts

@@ -1,5 +1,4 @@
 import { isLocalStudio } from '@/config/constants';
-import { queryKeys } from '@/react-query/constants';
 import { queryOptions } from '@tanstack/react-query';
 import { getClusterInfo } from './getClusterInfoQuery';
 
@@ -28,7 +27,7 @@ async function getInstanceInfo({ clusterId, instanceId }: GetInstanceInfoParams)
 
 export function getInstanceInfoQueryOptions(params: GetInstanceInfoParams) {
 	return queryOptions({
-		queryKey: [queryKeys.cluster, params.clusterId, queryKeys.instance, params.instanceId] as const,
+		queryKey: [params.clusterId, params.instanceId] as const,
 		queryFn: () => getInstanceInfo(params),
 		retry: false,
 	});

src/features/cluster/queries/getPlanTypesQuery.ts

@@ -1,5 +1,4 @@
 import { apiClient } from '@/config/apiClient';
-import { queryKeys } from '@/react-query/constants';
 import { queryOptions } from '@tanstack/react-query';
 
 async function getPlanTypes(organizationId: string) {
@@ -13,7 +12,7 @@ async function getPlanTypes(organizationId: string) {
 
 export function getPlanTypesOptions(organizationId: string) {
 	return queryOptions({
-		queryKey: [queryKeys.organization, organizationId, 'instancePlan'],
+		queryKey: [organizationId, 'instancePlan'],
 		queryFn: () => getPlanTypes(organizationId),
 		retry: false,
 	});

src/features/clusters/components/ClusterCard.tsx

@@ -23,7 +23,6 @@ import { Cluster } from '@/lib/api.patch';
 import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { authStore } from '@/lib/authStore';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
-import { queryKeys } from '@/react-query/constants';
 import { useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { CopyIcon, Ellipsis } from 'lucide-react';
@@ -68,6 +67,7 @@ export function ClusterCard({ cluster }: { cluster: Cluster; }) {
 	const onTerminateClick = useCallback(() => setIsTerminateClusterModalOpen(true), []);
 
 	const handleTerminatedCluster = useCallback(() => {
+		const organizationId = cluster.organizationId;
 		terminateCluster(cluster.id, {
 			onSuccess: () => {
 				toast.success('Success', {
@@ -81,7 +81,7 @@ export function ClusterCard({ cluster }: { cluster: Cluster; }) {
 					},
 				});
 				void queryClient.invalidateQueries({
-					queryKey: [queryKeys.organization],
+					queryKey: [organizationId],
 					refetchType: 'active',
 				});
 				setIsTerminateClusterModalOpen(false);

src/features/clusters/queries/getRegionLocationsQuery.ts

@@ -1,5 +1,4 @@
 import { apiClient } from '@/config/apiClient';
-import { queryKeys } from '@/react-query/constants';
 
 export interface GetRegionLocationsParams {
 	organizationId?: string;
@@ -18,7 +17,7 @@ async function getRegionLocations({ organizationId, availableHosts }: GetRegionL
 
 export function getRegionLocationsOptions({ organizationId, availableHosts }: GetRegionLocationsParams = {}) {
 	return {
-		queryKey: [queryKeys.cluster, 'regionLocations', organizationId, availableHosts],
+		queryKey: [organizationId, 'regionLocations', availableHosts],
 		queryFn: () => getRegionLocations({ organizationId, availableHosts }),
 		retry: false,
 	};

src/features/clusters/upsert/ClusterForm.tsx

@@ -18,7 +18,6 @@ import { groupThenKeyBy } from '@/lib/groupThenKeyBy';
 import { collapseKebabsToMaxLength } from '@/lib/string/collapseKebabsToMaxLength';
 import { stringsShareAPrefix } from '@/lib/string/stringsShareAPrefix';
 import { toKebabCase } from '@/lib/string/to-kebab-case';
-import { queryKeys } from '@/react-query/constants';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useRouter } from '@tanstack/react-router';
@@ -280,9 +279,9 @@ export function ClusterForm({
 		isSelfManaged: boolean;
 		toastId: string | number;
 	}) => {
-		void queryClient.invalidateQueries({ queryKey: [queryKeys.organization], refetchType: 'active' });
+		void queryClient.invalidateQueries({ queryKey: [organizationId], refetchType: 'active' });
 		if (!creating) {
-			void queryClient.invalidateQueries({ queryKey: [queryKeys.cluster, clusterId], refetchType: 'active' });
+			void queryClient.invalidateQueries({ queryKey: [clusterId], refetchType: 'active' });
 		}
 
 		void router.invalidate();

…instance/databases/DatabaseTableView.tsx …tabases/components/DatabaseTableView.tsxsrc/features/instance/databases/DatabaseTableView.tsx renamed to src/features/instance/databases/components/DatabaseTableView.tsx src/features/instance/databases/DatabaseTableView.tsx renamed to src/features/instance/databases/components/DatabaseTableView.tsx

@@ -6,9 +6,6 @@ import {
 	DropdownMenuTrigger,
 } from '@/components/ui/dropdownMenu';
 import { useInstanceClientIdParams } from '@/config/useInstanceClient';
-import { ColumnFiltersSchema } from '@/features/instance/databases/components/ColumnFilters';
-import { PickColumnsDropdown } from '@/features/instance/databases/components/PickColumnsDropdown';
-import { TableView } from '@/features/instance/databases/components/TableView';
 import { formatBrowseDataTableHeader } from '@/features/instance/databases/functions/formatBrowseDataTableHeader';
 import { AddTableRowModal } from '@/features/instance/databases/modals/AddTableRowModal';
 import { DeleteDatabaseModal } from '@/features/instance/databases/modals/DeleteDatabaseModal';
@@ -36,7 +33,7 @@ import { useSetWatchedValue } from '@/lib/events/watcher';
 import { keyBy } from '@/lib/keyBy';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
-import { useLoaderData, useNavigate, useParams } from '@tanstack/react-router';
+import { useNavigate, useParams } from '@tanstack/react-router';
 import { Row, VisibilityState } from '@tanstack/react-table';
 import {
 	EllipsisIcon,
@@ -52,8 +49,11 @@ import {
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { ColumnFiltersSchema } from './ColumnFilters';
+import { PickColumnsDropdown } from './PickColumnsDropdown';
+import { TableView } from './TableView';
 
-export function DatabaseTableView() {
+export function DatabaseTableView({ instanceDatabaseMap }: { instanceDatabaseMap: InstanceDatabaseMap }) {
 	const allParams: {
 		clusterId?: string;
 		instanceId?: string;
@@ -81,7 +81,6 @@ export function DatabaseTableView() {
 	const [selectedIds, setSelectedIds] = useEffectedState<null | unknown[]>(null, allParams);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 
-	const instanceDatabaseMap = useLoaderData({ strict: false }) as InstanceDatabaseMap;
 	const isLastTableInDatabase = useMemo(() => {
 		const tableNames = databaseName ? Object.keys(instanceDatabaseMap[databaseName] || []).sort() : [];
 		return tableNames?.length === 1;