Implement cache management

src/pages/BlogPost.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useParams, Link } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
 import { supabase } from '@/integrations/supabase/client';
+import { useBlogPost } from '@/hooks/blog/useBlogPost';
 import { MarkdownRenderer } from '@/components/blog/MarkdownRenderer';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
@@ -17,22 +17,7 @@ import { useOpenGraph } from '@/hooks/useOpenGraph';
 export default function BlogPost() {
   const { slug } = useParams<{ slug: string }>();
 
-  const { data: post, isLoading } = useQuery({
-    queryKey: ['blog-post', slug],
-    queryFn: async () => {
-      const query = supabase
-        .from('blog_posts')
-        .select('*, profiles!inner(username, display_name, avatar_url, avatar_image_id)')
-        .eq('slug', slug)
-        .eq('status', 'published')
-        .single();
-
-      const { data, error } = await query;
-      if (error) throw error;
-      return data;
-    },
-    enabled: !!slug,
-  });
+  const { data: post, isLoading } = useBlogPost(slug);
   
   // Update document title when post changes
   useDocumentTitle(post?.title || 'Blog Post');