Cf header can't be added as the the third parameter in fetch?

Developers Workers
#1

Hi,

I’m trying to set cacheTTL via cf property, while the docs seem to suggest that I have the cf property at the end fetch(URL, request, { cf: { cacheTTL: 10 } }) it seems that it doesn’t work and the age I’m getting is above 16?

866×164 3.74 KB

However, if I move the cf property before I set the request, it works, expires after 10 seconds:
fetch(URL, { cf: { cacheTTL: 10 } }, request)

793×199 6.67 KB

So I think there’s a bug on setting the cf property, where it only works if you set it before the request property?

Below is my current code, cacheTTL doesn’t work.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  return fetch(IMG_URL, request, { cf: { cacheTtl: 10 } })
}
#2

Okay just answering my question, hope someone finds this helpful

The problem with adding the cf header as the third argument won’t work since fetch doesn’t accept as third argument a cf object property in request.

So what I did to fix the code is just merge request and cf to combine it as the second argument.

 fetch(IMG_URL, { ...request, cf: { cacheTTL: 10 }})

So like this, and it works :slight_smile:

#3

The underlying issue here is fetch does not take three arguments, but only two. The cf field is always part of the request object, which is either the first argument or the second.

#4

you’re right, there is no 3rd argument, those dangling brackets } get the best of me, from hindsight it looks like an additional argument as opposed to being just another part of the object. I’ve updated the answer. Using the spread operator to make a new object is the correct solution.