// ❌ Only revalidatePath — must know all related paths

// 📁 app/posts/page.tsx
async function fetchPosts() {
  return fetch('https://api/posts').then(r => r.json());
  // Default force-cache
}

// 📁 app/sidebar/RecentPosts.tsx (also used in other components)
async function fetchRecentPosts() {
  return fetch('https://api/posts?limit=5').then(r => r.json());
}

// 📁 app/posts/actions.ts
'use server';
import { revalidatePath } from 'next/cache';

export async function createPost(formData: FormData) {
  await db.post.create({ data: { title: formData.get('title') as string } });

  // Invalidate all related paths one by one
  revalidatePath('/posts');           // Post list
  revalidatePath('/');                // Home has RecentPosts
  revalidatePath('/sidebar', 'layout'); // Sidebar has RecentPosts
  // If even one is missed, that page will have old data
}

// Disadvantages:
// - Mutation code must know all pages that use the data
// - Adding a new page requires modifying mutation code
// - If global components like sidebar/footer use related data, the entire layout is invalidated

// ✅ tags + revalidateTag — Invalidate by data unit

// 📁 app/posts/page.tsx
async function fetchPosts() {
  return fetch('https://api/posts', {
    next: { tags: ['posts'] },
  }).then(r => r.json());
}

// 📁 app/posts/[id]/page.tsx
async function fetchPost(id: string) {
  return fetch(`https://api/posts/${id}`, {
    next: { tags: ['posts', `post-${id}`] },
  }).then(r => r.json());
}

// 📁 app/posts/[id]/Comments.tsx
async function fetchComments(id: string) {
  return fetch(`https://api/posts/${id}/comments`, {
    next: { tags: [`post-${id}`, `comments-${id}`] },
  }).then(r => r.json());
}

// 📁 app/sidebar/RecentPosts.tsx (anywhere)
async function fetchRecentPosts() {
  return fetch('https://api/posts?limit=5', {
    next: { tags: ['posts'] },
  }).then(r => r.json());
}

// 📁 app/posts/actions.ts — Mutation code only needs to know tags
'use server';
import { revalidateTag } from 'next/cache';
import { redirect } from 'next/navigation';

export async function createPost(formData: FormData) {
  await db.post.create({ data: { title: formData.get('title') as string } });
  revalidateTag('posts');
  // All fetches with 'posts' tag (list, home RecentPosts, sidebar, etc.) are automatically invalidated
}

export async function updatePost(id: number, formData: FormData) {
  await db.post.update({
    where: { id },
    data: { title: formData.get('title') as string },
  });
  revalidateTag('posts');           // List (title changed)
  revalidateTag(`post-${id}`);      // Details + comments (comments also have post-{id} tag)
}

export async function addComment(postId: number, formData: FormData) {
  await db.comment.create({
    data: { postId, text: formData.get('text') as string },
  });
  revalidateTag(`comments-${postId}`); // Only comments for that post (overall post list, other posts remain)
}

export async function deletePost(id: number) {
  await db.post.delete({ where: { id } });
  revalidateTag('posts');
  revalidateTag(`post-${id}`);
  redirect('/posts');
}

// Advantages:
// - Mutation code doesn't need to know where data is used
// - Adding a new page with the same fetch doesn't require mutation modification
// - Higher accuracy (only necessary tags, unrelated page caches remain)
// - On-demand possible — can call revalidateTag upon receiving a webhook