Webhook

In previous article we collected all the necessary ENV variables and deployed uDocs on vercel using those variables. Vercel provided us with domain name. Now in this article we would use that domain name and SANITY_WEBHOOK_SECRET to create webhooks in Sanity. We would be creating four different webhooks that would use same secret because that way they will authenticate with our website deployed on vercel.

Sanity Webhooks

Sanity webhooks allow us to create trigger on specific schema type. uDocs contains docs and toc (Table of Content) schema types. So we would create separate webhook for each of them so that whenever we create or update doc or toc in Studio these webhook will be triggered and they will call revalidation APIs in our website on vercel.

To create webhook in sanity go to your project in sanity and got to API tab in project. In API tab you will find a button to create webhook, click on that button it will take you to form to create webhook. You would be creating following two webhooks.

Revalidate DOC: In webhook form you need to add values for Name, URL, Dataset, Trigger on, Filter, Projection, Status, HTTP method and Secret fields. Following is the configuration that you can use

• Name: Revalidate Webhook
• URL: https://<domain-name>/api/revalidate/doc
• Dataset: production (your dataset name can be different)
• Trigger on: Select all three create, update and delete
• Filter: Here you have to specify schema type _type == 'doc'
• Projection: Here you need to specify which fields your api needs. Type {_type, _id, "slug": slug.current, language, "version": version->slug.current}
• Status: Select Enable Webhook option
• HTTP method: in advanced setting select POST method from dropdown.
• Secret: add the value of SANITY_WEBHOOK_SECRET here

Now click save and your webhook is created.

Revalidate TOC: In webhook form you need to add values for Name, URL, Dataset, Trigger on, Filter, Projection, Status, HTTP method and Secret fields. Following is the configuration that you can use

• Name: Revalidate Table of Content
• URL: https://<domain-name>/api/revalidate/toc
• Dataset: production (your dataset name can be different)
• Trigger on: Select all three create, update and delete
• Filter: Here you have to specify schema type _type == 'toc'
• Projection: Here you need to specify which fields your api needs. Type {_type, _id, title, overview, "slug": slug.current, language, "version": version->slug.current}
• Status: Select Enable Webhook option
• HTTP method: in advanced setting select PATCH method from dropdown.
• Secret: add the value of SANITY_WEBHOOK_SECRET here

Now click save and your webhook is created.

Algolia Webhooks

We would be creating two webhooks that would be triggered whenever there is change in Sanity CMS so that we can update our algolia index and get updated results.

Algolia Create and Update: This webhook would be created whenever we create new doc or update existing one.

• Name: Algolia Create and Update
• URL: https://<domain-name>/api/algolia
• Dataset: production (your dataset name can be different)
• Trigger on: Select create, update options.
• Filter: Here you have to specify schema type _type == 'doc'
• Projection: Here you need to specify which fields your api needs. Type { _id }
• Status: Select Enable Webhook option
• HTTP method: in advanced setting select POST method from dropdown.
• Secret: add the value of SANITY_WEBHOOK_SECRET here

Now click save and your webhook is created.

Algolia Delete: This webhook would be created whenever we create new doc or update existing one.

• Name: Algolia Delete
• URL: https://<domain-name>/api/algolia
• Dataset: production (your dataset name can be different)
• Trigger on: Select only delete
• Filter: Here you have to specify schema type _type == 'doc'
• Projection: Here you need to specify which fields your api needs. Type { _id }
• Status: Select Enable Webhook option
• HTTP method: in advanced setting select DELETE method from dropdown.
• Secret: add the value of SANITY_WEBHOOK_SECRET here

Now click save and your webhook is created.

Now you have created all the necessary webhooks to sync your sanity cms with vercel deployments and algolia. In next article you would learn how to setup uDocs locally to start developing.