Adding Webhooks in Strapi 🎯

If you are using a static website generator (or framework with build option) with Strapi (Gatsby, Nuxt, Next, etc.) it is necessary to rebuild it when the content is updated in Strapi. In a Headless CMS, this is typically called a Webhook feature. Unfortunately it is not available yet in Strapi even if it has been requested.

But what we like at Strapi is to help developers. So even if the feature is not developed yet, this short article gives you an easy way to implement work around! 😃

Discovering the lifecycle callbacks 🔍

As you may know, every Content Type (aka models) has lifecycle callbacks: functions which are triggered every time an entry is fetched, inserted, updated or deleted. Here is the list:

• Callbacks on save (both triggered on entry creation and update): beforeSave, afterSave.
• Callbacks on fetch: beforeFetch, afterFetch.
• Callbacks on fetchAll: beforeFetchAll, afterFetchAll.
• Callbacks on create: beforeCreate, afterCreate.
• Callbacks on update: beforeUpdate, afterUpdate.
• Callbacks on destroy: beforeDestroy, afterDestroy.

All of these functions are available in a file located at api/yourContentType/models/YourContentType.js.

If your goal is to rebuild a static website, the only useful callbacks are afterCreate, afterUpdate and afterDestroy. So, uncomment them, add logs and try to create, update and delete entries from the admin panel.

Path: api/yourContentType/models/YourContentType.js

Making the HTTP call 🔊

We are almost there: the only thing we still need to do is to actually make the HTTP call to the URL which will rebuild the static website.

URL config

So first of all, let's store this URL in a proper way. To do so, edit config/environments/development/custom.json:

Path: config/environments/development/custom.json

1{
2  "staticWebsiteBuildURL": "https://yourservice.com/"
3}

Do the same thing for other environments.

HTTP call

Now it is time to make the HTTP call. In this example we will use axios as it is already in the list of Strapi's dependencies. Let's install it:

1npm i axios --save

Edit api/yourContentType/models/YourContentType.js:

Path: api/yourContentType/models/YourContentType.js

Mongoose limitation

Until September 2018, remove lifecycle callback was not supported by Mongoose. This has been added but strapi-hook-mongoose is not adapted yet to this update.

So, to trigger an url on delete, please add request.post(strapi.config.currentEnvironment.staticWebsiteBuildURL, entry); in:

• remove action of api/yourContentType/services/YourContentType.js (triggered by your public API).
• delete action of plugins/content-manager/services/ContentManager.js (triggered by the Content Manager).

Note: do not forget to require request at the top of these files.

Conclusion

Articles of this type are made to help you. We hope they do! Please comment with your suggestions.

Need more help? Ask your questions on StackOverflow, submit issues on GitHub and request features on ProductBoard!