Cloudflare Developers•2y ago

How to use cache API in page function?

I've made use of the cache API successfully within a worker before but I'm unable to figure out what is wrong in my page function. Is it not supported? It works fine locally with wranger pages dev but deploying it to my page worker results in no value getting incremented. My page worker does have a custom domain associated to it. My test code, it's always returning 1 and never incrementing when deployed to the page worker (works as expected against wrangler pages dev

export const onRequest: PagesFunction<Env> = async (context) => {
  const cacheKey = "https://site/source/data/all";
  let myCache = await caches.open("custom:cache");
  const cachedValue = await myCache.match(cacheKey);

  console.log("Returned cache", cachedValue);
  const value = { test: 1 };
  let testing = null;

  if (cachedValue) {
    testing = await cachedValue.json();
    console.log("Reading cache", testing);
    // @ts-ignore no type defined due to testing
    value.test = 1 + testing.test;
  }

  const headers = new Headers();
  headers.append("content-type", "application/json");
  headers.append("Cache-Control", `s-maxage=${180}`);
  const cachedResponse = new Response(JSON.stringify(value), {
    status: 200,
    statusText: "Success",
    headers: headers,
  });

  await myCache.put(cacheKey, cachedResponse);

  return new Response(JSON.stringify(value));
};

export const onRequest: PagesFunction<Env> = async (context) => {
  const cacheKey = "https://site/source/data/all";
  let myCache = await caches.open("custom:cache");
  const cachedValue = await myCache.match(cacheKey);

  console.log("Returned cache", cachedValue);
  const value = { test: 1 };
  let testing = null;

  if (cachedValue) {
    testing = await cachedValue.json();
    console.log("Reading cache", testing);
    // @ts-ignore no type defined due to testing
    value.test = 1 + testing.test;
  }

  const headers = new Headers();
  headers.append("content-type", "application/json");
  headers.append("Cache-Control", `s-maxage=${180}`);
  const cachedResponse = new Response(JSON.stringify(value), {
    status: 200,
    statusText: "Success",
    headers: headers,
  });

  await myCache.put(cacheKey, cachedResponse);

  return new Response(JSON.stringify(value));
};

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to use cache API in page function?