hamid zarghami
31 lines
1001 B
TypeScript
31 lines
1001 B
TypeScript
import { NextPage } from 'next'
|
|
import { Suspense } from 'react'
|
|
import { HydrationBoundary } from '@tanstack/react-query'
|
|
import { dehydrate } from '@tanstack/react-query'
|
|
import { QueryClient } from '@tanstack/react-query'
|
|
import { categoriesQueryOptions, danakServiceSuggestedQueryOptions, servicesQueryOptions } from './hooks/useProductData'
|
|
import Products from './ProductsPage'
|
|
import Loading from './loading'
|
|
|
|
const ProductsPage: NextPage = () => {
|
|
return (
|
|
<Suspense fallback={<Loading />}>
|
|
<ProductsContent />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
async function ProductsContent() {
|
|
const queryClient = new QueryClient()
|
|
await queryClient.prefetchQuery(servicesQueryOptions)
|
|
await queryClient.prefetchQuery(categoriesQueryOptions)
|
|
await queryClient.prefetchQuery(danakServiceSuggestedQueryOptions)
|
|
|
|
return (
|
|
<HydrationBoundary state={dehydrate(queryClient)}>
|
|
<Products />
|
|
</HydrationBoundary>
|
|
)
|
|
}
|
|
|
|
export default ProductsPage |