hydration boundary for the metric and asset stores

This commit is contained in:
Nate Kelley 2025-04-07 21:39:42 -06:00
parent 023ac538e2
commit 80f8ce86fd
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
3 changed files with 9 additions and 31 deletions

View File

@ -1,8 +1,4 @@
import { prefetchGetMetric } from '@/api/buster_rest/metrics';
import { metricsQueryKeys } from '@/api/query_keys/metric';
import { HydrationBoundaryMetricStore } from '@/context/Metrics/useOriginalMetricStore';
import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout'; import { AppAssetCheckLayout } from '@/layouts/AppAssetCheckLayout';
import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
export default async function MetricLayout({ export default async function MetricLayout({
children, children,
@ -12,18 +8,10 @@ export default async function MetricLayout({
params: Promise<{ metricId: string }>; params: Promise<{ metricId: string }>;
}) { }) {
const { metricId } = await params; const { metricId } = await params;
const queryClient = await prefetchGetMetric({ id: metricId });
const metric = queryClient.getQueryData(metricsQueryKeys.metricsGetMetric(metricId).queryKey);
// const state = queryClient.getQueryState(queryKeys.metricsGetMetric(metricId).queryKey);
return ( return (
<HydrationBoundary state={dehydrate(queryClient)}> <AppAssetCheckLayout assetId={metricId} type="metric">
<HydrationBoundaryMetricStore metric={metric}> {children}
<AppAssetCheckLayout assetId={metricId} type="metric"> </AppAssetCheckLayout>
{children}
</AppAssetCheckLayout>
</HydrationBoundaryMetricStore>
</HydrationBoundary>
); );
} }

View File

@ -25,16 +25,3 @@ export const HydrationBoundaryAssetStore: React.FC<{
return <>{children}</>; return <>{children}</>;
}; };
// export const HydrationBoundaryMetricStore: React.FC<{
// children: React.ReactNode;
// metric?: OriginalMetricStore['originalMetrics'][string];
// }> = ({ children, metric }) => {
// const setOriginalMetrics = useOriginalMetricStore((x) => x.setOriginalMetric);
// useMount(() => {
// if (metric) setOriginalMetrics(metric);
// });
// return <>{children}</>;
// };

View File

@ -10,6 +10,7 @@ import { prefetchGetMetric } from '@/api/buster_rest/metrics/queryReqestsServer'
import { prefetchGetDashboard } from '@/api/buster_rest/dashboards/queryServerRequests'; import { prefetchGetDashboard } from '@/api/buster_rest/dashboards/queryServerRequests';
import { metricsQueryKeys } from '@/api/query_keys/metric'; import { metricsQueryKeys } from '@/api/query_keys/metric';
import { dashboardQueryKeys } from '@/api/query_keys/dashboard'; import { dashboardQueryKeys } from '@/api/query_keys/dashboard';
import { HydrationBoundaryAssetStore } from '@/context/Assets/HydrationBoundaryAssetStore';
export type AppAssetCheckLayoutProps = { export type AppAssetCheckLayoutProps = {
assetId: string; assetId: string;
@ -53,9 +54,11 @@ export const AppAssetCheckLayout: React.FC<
return ( return (
<HydrationBoundary state={dehydratedState}> <HydrationBoundary state={dehydratedState}>
<AppAssetLoadingContainer assetId={assetId} type={type}> <HydrationBoundaryAssetStore asset={queryData}>
{Component} <AppAssetLoadingContainer assetId={assetId} type={type}>
</AppAssetLoadingContainer> {Component}
</AppAssetLoadingContainer>
</HydrationBoundaryAssetStore>
</HydrationBoundary> </HydrationBoundary>
); );
}; };