30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
|
|
import { Suspense } from 'react';
|
|
import PageContainer from '@/components/layout/page-container';
|
|
import { getQueryClient } from '@/lib/query-client';
|
|
import { pokemonOptions } from '@/features/react-query-demo/api/queries';
|
|
import { PokemonInfo } from '@/features/react-query-demo/components/pokemon-info';
|
|
import { PokemonSkeleton } from '@/features/react-query-demo/components/pokemon-skeleton';
|
|
|
|
export const metadata = {
|
|
title: 'Example Dashboard: React Query'
|
|
};
|
|
|
|
export default function ExampleReactQueryPage() {
|
|
const queryClient = getQueryClient();
|
|
void queryClient.prefetchQuery(pokemonOptions(25));
|
|
|
|
return (
|
|
<PageContainer
|
|
pageTitle='React Query'
|
|
pageDescription='Server prefetch + hydration + suspense query pattern in a public example route.'
|
|
>
|
|
<HydrationBoundary state={dehydrate(queryClient)}>
|
|
<Suspense fallback={<PokemonSkeleton />}>
|
|
<PokemonInfo />
|
|
</Suspense>
|
|
</HydrationBoundary>
|
|
</PageContainer>
|
|
);
|
|
}
|