Multiple revalidateTag() fails silently
Unanswered
Jersey Wooly posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
Callig multiple revalidateTag()'s in an API handler only revalidates 1 tag. Or I'm doing smth wrong.
Given having both a
Edit: Timple query tags (
The issue is NOT multiple revalidateTag() calls, but something with the fetch tags.
revalidateTag(body._type);
if (body.slug) {
revalidateTag(`${body._type}:${body.slug}`);
}
Given having both a
body._type
& body.slug
it only revalidates one of them.Edit: Timple query tags (
tags: [
job]
) are the ones NOT working and the complex ones are (tags: [
job:${params.slug}]
) which is even more suprising.The issue is NOT multiple revalidateTag() calls, but something with the fetch tags.
22 Replies
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
im confused here, you are currently having one tag that's name is made from 2 vars...?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
Yes. I use an API route that gets called from a Sanity webhook whenver the content changes in the CMS.
Here's the route handler:
and 2 of my fetches from different components on different pages:
Note: sanityFetch is just a wrapper around fetch() with a sanity client
Here's the route handler:
export async function POST(req: NextRequest) {
try {
const { body } = await parseBody(req);
if (!body?._type) {
const message = "Bad Request";
return new Response(JSON.stringify({ message, body }), { status: 400 });
}
// If the `_type` is `page`, then all `{next: {tags: ['page']}}` will be revalidated. If `slug` included, all 'page' and 'page:slug' tags.
revalidateTag(body._type);
if (body.slug) {
revalidateTag(`${body._type}:${body.slug}`);
}
return NextResponse.json({
status: 200,
revalidated: true,
now: Date.now(),
body,
});
} catch (err: any) {
console.error(err);
return new Response(err.message, { status: 500 });
}
}
and 2 of my fetches from different components on different pages:
const jobs = await sanityFetch<Job[]>({
query: jobsQuery,
tags: [`job`],
});
const page = await sanityFetch<Job | null>({
query: jobBySlugQuery,
params: { slug: params.slug },
tags: [`job:${params.slug}`],
});
Note: sanityFetch is just a wrapper around fetch() with a sanity client
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
If thei don't think this is correct... you only have one tag in your example... otherwise you should add more in the tag list in fetch_type
ispage
, then all{next: {tags: ['page']}}
will be revalidated. Ifslug
included, all 'page' and 'page:slug' tags.
hmm actually looking at your example, it looks correct...?
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
When the API route gets called, it runs and I receive a success response.
{
"id": "atm-xxx",
"projectId": "xxx",
"inProgress": false,
"duration": 2760,
"createdAt": "2023-09-23T14:32:41.886Z",
"updatedAt": "2023-09-23T14:32:41.886Z",
"messageId": "msg-xxx",
"hookId": "xxx",
"isFailure": false,
"failureReason": null,
"resultCode": 200,
"resultBody": "{\"status\":200,\"revalidated\":true,\"now\":1695479564241,\"body\":{\"_type\":\"job\",\"slug\":\"product-engineer-with-next-js-expertise-2023-08-30t12-53-00-000z\"}}"
}
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
are you sure that your sanityFetch actually passes on the tags to fetch req
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
yes, I'm sure. because 1 tag always gets revalidated. Usually the one with slug included
job:${params.slug}
. But the simple job
tag doesn't. Aka: the job/[slug] page receives the new data on refresh but the homepage, listing all jobs (simple job
tag) does not(btw thanks for taking time out of your weekend to debug cache issues for a rando guy on the internet lol)
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
you should be-able to revalidate multiple tho...
i see your issue
i think this could be from your homepage having its own page cache
like use revalidatePath also
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
well, sometimes I can't see the new data at all. lol. I'm working on it currently, trying to figure out what's going on. And now I can't see anything changed on the site, although the api route succeeded.
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
like either use revalidatePath for homepage or export const revalidate = 0 for it... this may give newer data
as nextjs could be caching the page as it thinks its static
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
I thought revalidatePath wouldn't make sense in my case because I render the same components on multiple pages. Example: a job post of a remote, EU based, part-time product engineer.
That should render on:
- homepage
- /location/eu page
- /contract/part-time page
- /type/remote page
- /job/[slug] page
- etc..
That should render on:
- homepage
- /location/eu page
- /contract/part-time page
- /type/remote page
- /job/[slug] page
- etc..
![Avatar](https://cdn.discordapp.com/avatars/657067112434499595/c78dd8e985ede1ad50c31ac682dd91a1.webp?size=256)
risky
then disable page level caching (fetch would be cached still)
![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
but yeah, using revalidatePath at least the homepage might make more sense. Also, I'm trying to figure out if I need
generateStaticParams
for dynamic routes or don't when using revalidate*the funny thing is that
generateStaticParams
makes no difference in the revalidation issue. I'm working on 2 projects right now where I try to figure out this stuff. And 1 is using generateStaticParams
& revalidatePath
the other is just revalidatePath
. And there's no difference. 😄![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
fyi: I think I figured that the simple query tags (
tags: [
job]
) are the ones NOT working and the complex ones are (tags: [
job:${params.slug}]
) which is even more suprising now. lol.![Avatar](https://cdn.discordapp.com/embed/avatars/2.png)
Jersey WoolyOP
@Alfonsus Ardani I see you were active recently in similar discussions, so I thought you might have some ideas whenever you have some time