Next.js Discord

Discord Forum

I created a Webhook; How do I use it to revalidate/refresh data?

Unanswered
Northern Mockingbird posted this in #help-forum
Open in Discord
Northern MockingbirdOP
When I update a document on Sanity, the contents I see on the browser do not show the latest changes without a cache reset/hard reload.

I created a webhook and pointed it to this url:
https://<projectId>.api.sanity.io/v2021-03-25/data/query/production?query=*[0]


I don't know if that is correct, but when I update a document I do see the webhook fires in the logs.

It errors:
{"error":{"bodyTruncated":false,"description":"json: unknown field \\"price\\"","type":"httpInvalidRequestBody"}}\n


1) What have I not done that is the cause of this error?

2) If I fix this error, will it revalidate my data or do I have to somehow call it from my app to use revalidateTags() ? If that is the case, how?

14 Replies

Philippine Crocodile
When you create the webhook in sanity the url it should point to is an api route in your application like https://mysite.com/api/revalidate and then check the incoming payload for a specific post_id so you can revalidate the path for that specific post or revalidate the path for your whole posts page.
Northern MockingbirdOP
Thanks.

So I setup my webhook and am testing my local with Localtunnel.

I set up my api route exactly according to
https://github.com/sanity-io/webhook-toolkit

I'm getting errors complaining that readable is not iterable nextjs webhook despite doing it exactly the way the docs describe.

Any experience with that?
Philippine Crocodile
Are you using the Pages Router or the App Router because the Sanity example you linked to is only for the Pages Router?
Philippine Crocodile
Also, are you trying to invalidate a single post or a page linking to all your posts? If it is for a single post what is the dynamic section of your route e.g. [slug] or [id]. You need this to determine what sort of payload you will send from your projection.
Northern MockingbirdOP
Hmm.. I'm using App Router.

I'm trying to revalidate a page once the update occurs
Philippine Crocodile
Okay, so I don't think that example is the right one. All you need to do is to be able to read the payload that comes from sanity.io once an update happens. If your dynamic route segment is [slug] for example, you need to make sure that your projection from sanity is sending the the slug in the payload, you should then be able to extract that slug from the payload in your route handler and once you have the slug you can then call the revalidatePath(/posts/${slug}) function.
Northern MockingbirdOP
Yeah.. trying.
After what you said I found an example showing what the api/revalidate/route.js file would look like here:
https://www.sanity.io/blog/sanity-nextjs-enhancements

It focuses on tags, so I added tags on every page where I am querying data I want revalidated, and set up my Filter and Projection the way they showed in the example.

Not working of course. Still trying.
Jesus Christ. At least before it was hitting the route and erroring. Now it's not even hitting the route.
Philippine Crocodile
When querying the data are you using sanityFetch
Northern MockingbirdOP
const galleryItems = await client.fetch(
    `*[_type == "galleryItem"] | order(_createdAt desc)`,
    {},
    { next: { tags: ['gallery'] } }
  );
Philippine Crocodile
Try to hit the route manually to see what happens
If you can share the route handler code as well as the the parameters you have in your webhook projection
Northern MockingbirdOP
Holy god it worked
Northern MockingbirdOP
Could one webhook handle multiple types or should I do one webhook per type?

Nvm I found the query for that

_type in ['this', 'that', 'etc']