import { HydrationBoundary, dehydrate } from '@tanstack/react-query'
import { QueryClient } from '@tanstack/react-query'
import BlogList from './components/BlogList'
import { blogCategoriesQueryOptions, blogsQueryOptions, blogCombinedQueryOptions, mostVisitedBlogsQueryOptions } from './hooks/useBlogsData'

export const metadata = {
    title: 'مجله داناک | مقالات و آموزش‌ها',
    description: 'مقالات جذاب، نکات آموزشی و اخبار دنیای نرم‌افزار در مجله داناک',
}

export default async function BlogsPage() {

    const queryClient = new QueryClient()
    await queryClient.prefetchQuery(blogsQueryOptions)
    await queryClient.prefetchQuery(blogCategoriesQueryOptions)
    await queryClient.prefetchQuery(blogCombinedQueryOptions)
    await queryClient.prefetchQuery(mostVisitedBlogsQueryOptions)

    return (
        <HydrationBoundary state={dehydrate(queryClient)}>
            <BlogList />
        </HydrationBoundary>
    )
}