Contentful logo

Contentful Community

Webhooks and autosave

Hi
We’re using webhooks on autosave to save contents in a database and be able to have a preview of our website. We’re not using the preview API because it is not efficient enough when calling it with depth parameter.

By default, the webhook is triggered every 20s on autosave.
Is there a way to change this default value ?
If not, is there a way to trigger the webhook (adding a button with UI extension?) without having to publish the content.

Thanks

Jerome

Hi @jerome.hautecoeur,

Although the autosave triggers the webhook every 20s, you could also send a PUT request to your given entry using our Content Management API, which should trigger the save event in your webhook. With that, your webhook will be triggered everytime you send a a PUT request (i.e. save content).

Also, in order to do that through the Web Interface, you could create a small customization using our UI extension SDK, simply creating a link to send the PUT request I referred to:

UI extensions

Let me know if this helps or if you have any other questions :slight_smile:

Hi @gabriel

We’re using the webapp so the UI extension would be the option.
We’re new on this topic (UI extension), could we have a little help (it seems simple when you explain but I don’t really see how to do it) ?

Thanks

Jerome

Hi Jerome,

Most likely, you’d want to use the Content management extension, which resides on the sidebar and allow for actions that include every element in the entry.

As you set up the basis elements of your UI extension (here and here), you’d set up the basic HTML elements (e.g. a basic save button) and associate that with a PUT request to that same entry using the Management API.

To send this PUT request, you can do this by using the extension.space object with the space.updateEntry(data) method, as you can read more in this section of our documentation.

Let me know if this helped clarify :slight_smile:

Can you elaborate on what you mean about the preview api not being efficient enough?

I did some testing using the webapp by listening to webhooks and comparing the entry’s sys.updateAt with the time the webhook is received. The average was 10.3 seconds with 10 samples.

Just for reference, I tested using the management API directly to update an entry and webhooks fire much faster. The average was 0.19 seconds with 16 samples.

Here’s the code I used for the webhook listener:

var express = require('express')
var bodyParser = require('body-parser')
var app = express()

app.use(bodyParser.json({type: ['application/*+json', 'application/json']}))
app.set('port', (process.env.PORT || 5000))
app.all('/', (request, response) => {
  now = new Date()
  updatedAt = new Date(request.body.sys.updatedAt)
  difference = (now - updatedAt)/1000
  console.log(`${difference}\t|\t${request.body.fields.title['en-US']}`)
  response.status(200).end()
})

app.listen(app.get('port'), () => {
  console.log('Node app is running on port', app.get('port'))
})

Then use something like webtask or now.sh to host this or ngrok to make your localhost app publically accessible and put the url into Contentful’s webhook settings.

And here is how I used the CMA to update one entry many times in a row:

var int = setInterval(() => {
  client.getSpace('<SPACE_ID>')
  .then((space) => space.getEntry('<ENTRY_ID>'))
  .then((entry) => {
    entry.fields.title['en-US'] = `Homepage ${Date.now()}`
    return entry.update()
  }).then((entry) => 
    console.log(`Entry ${entry.fields.title['en-US']} updated.`)
)}, 5000)

clearInterval(int)

Hi @charlie

Previously, we were calling the Preview API to generate our page before publication.
We had to do several calls with each a depth parameter to get info about some related content. With a depth parameter, the preview API needs several seconds to answer and our preview was not usable (more than 30s to generate a page).
Since, we have moved to another way of displaying our preview and we use webhooks on autosave to get content in a local database so we do not have to call the preview API to build a page.
Unfortunately, the webhook on autosave are only triggered every 20s and sometimes they “clash” with autosave functionnality (some content may be lost if the webhook is triggered while the webapp is saving the content).

Regards
Jerome

Hi Gabriel,

I am pretty much trying to do the same thing here, and most of it is working, but I think I am passing the incorrect data to space.updateEntry(data). I have tried a couple things and I either get a 404, or a bad request. Can you let me know what parameters this function accepts, and possibly provide an example?

I have tried to use space.updateEntry(api.entry.getSys()), space.updateEntry(api.entry), space.updateEntry(api.entry.id).

None seem to be doing the trick.

I ended up getting this to work by doing:

const entryValue = api.space.getEntry(api.entry.id) and then passing that value into update entry: space.updateEntry(entryValue). Seemed a bit redundant, but I guess the shape of the object had to be pretty specific.

Now I have my webhook triggering properly on “save” instead of on “auto-save”, which is great!

i am trying to do pretty much same but when trying to update an entry I am getting “DOMException: Failed to execute ‘postMessage’ on ‘Window’: function(){return i} could not be cloned” error running extension in my local in developer mode. could anyone help me fix this