revalidatePath fails when used with generateStaticParams

[985563349]

I wanted to use ISR to render my blog page, so I used generateStaticParams and set dynamicParams to true. The static page was successfully generated during the build, and the page could be updated through revalidatePath after the blog was updated. This is really great.

But after I add a new blog in the CMS system, I cannot update the interface through revalidatePath. Is there any good solution?

Additional information

next: 13.5.1
react: 18.2.0

[985563349]

I seem to have found the reason. . .

Initially I used GraphQL to query the data and revalidatePath to update my routes:

// api/revalidate/route.ts
export async function POST(request: NextRequest) {
  const path = request.nextUrl.searchParams.get('path');

  // ...
  revalidatePath(path);

  return NextResponse.json({ revalidated: true, now: Date.now() });
}

// posts/[slug]/page.tsx
export async function generateStaticParams() {
  const { data } = await client.queries.noteConnection();

  return data.map((note) => ({
    slug: note.title,
  }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const { data } = await client.queries.note({ relativePath: `${params.slug}.mdx` })

  return (
    <article className="prose dark:prose-invert prose-p:text-lg">
      <h1 className="mb-3">{data.title}</h1>
    </article>
  );
}

But when I call the interface POST /api/revalidate and try to update my route, there will be an update failure problem (I guess the passed path does not match the corresponding cache).

So I changed my plan:

// api/revalidate/route.ts
export async function POST(request: NextRequest) {
  const tag = request.nextUrl.searchParams.get('tag');

  // ...
  revalidateTag(tag);

  return NextResponse.json({ revalidated: true, now: Date.now() });
}

// posts/[slug]/page.tsx
export async function generateStaticParams() {
  const { data } = await client.queries.noteConnection();

  return data.map((note) => ({
    slug: note.title,
  }));
}

export default async function Page({ params }: { params: { slug: string } }) {
  const cacheKey = `/notes/${params.slug}`;

  const { data } = await unstable_cache(
    async () => client.queries.note({ relativePath: `${params.slug}.mdx` }),
    [cacheKey],
    {
      tags: [cacheKey],
    }
  )();

  return (
    <article className="prose dark:prose-invert prose-p:text-lg">
      <h1 className="mb-3">{data.title}</h1>
    </article>
  );
}

I can update normally after using unstable_cache and revalidateTag.

[anjitcubit]

It's great that you solved it on your own, I am also using cms. and currently, I'm facing this issue :
when the navigation menu updated by cms
. since we can't revalidateTag in an array or in a sequential one, how did you resolve that?