How to Cache API response, with Hono JS & workers

Hello all newbie here, I am making an API where in an endpoint I am calling a third party API and sending a JSON response to the client.
I tried adding cache headers to the fetch API, but I am not able to see any

cf-cache-status

cf-cache-status

cf-cache-status

cf-cache-status in the headers.

My approach

app.get('/', async (c) => {
  const res = await homeController();
  return c.json(res);
});

app.get('/', async (c) => {
  const res = await homeController();
  return c.json(res);
});

app.get('/', async (c) => {
  const res = await homeController();
  return c.json(res);
});

app.get('/', async (c) => {
  const res = await homeController();
  return c.json(res);
});

Home controller calls the api

const homeController = async () => {
  const res = await fetch('example.com', {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtlByStatus: {
        '100-199': 0,
        '200-299': 14400,
        '300-599': 0,
      },
    },
    headers: {
      'Cache-Control': 'public, max-age=14400',
    },
  });
  const data = await res.json();
  return data;
};

const homeController = async () => {
  const res = await fetch('example.com', {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtlByStatus: {
        '100-199': 0,
        '200-299': 14400,
        '300-599': 0,
      },
    },
    headers: {
      'Cache-Control': 'public, max-age=14400',
    },
  });
  const data = await res.json();
  return data;
};

const homeController = async () => {
  const res = await fetch('example.com', {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtlByStatus: {
        '100-199': 0,
        '200-299': 14400,
        '300-599': 0,
      },
    },
    headers: {
      'Cache-Control': 'public, max-age=14400',
    },
  });
  const data = await res.json();
  return data;
};

const homeController = async () => {
  const res = await fetch('example.com', {
    method: 'GET',
    cf: {
      cacheEverything: true,
      cacheTtlByStatus: {
        '100-199': 0,
        '200-299': 14400,
        '300-599': 0,
      },
    },
    headers: {
      'Cache-Control': 'public, max-age=14400',
    },
  });
  const data = await res.json();
  return data;
};

i have set the cache-control headers, but cannot see the

cf-cache-status

cf-cache-status

cf-cache-status

cf-cache-status header can anyone tell me what am i doing wrong. also i am not using fetch exported by cloudflare.

Screenshot_2023-10-30_at_11.09.34_PM.png

kian•10/31/23, 9:47 AM

You're not returning the response headers from your fetch request, only the body.

kian•10/31/23, 9:48 AM

If you're not modifying the body or checking any of it's properties, you can just return the response in homeControllerhomeController and return that in your Hono handler.

afkOP•10/31/23, 9:49 AM

so you are suggesting instead of data i should return the entire response ?

kian•10/31/23, 9:49 AM

If you want to see the original response headers, yeah.

afkOP•10/31/23, 9:49 AM

sure i will try that and and update here

afkOP•10/31/23, 10:02 AM

This did not work

Cyb3r-Jak3•10/31/23, 11:56 PM

I'm confused. Are you trying to see the cache status of the sub request in your response?

afkOP•11/1/23, 3:45 AM

@Cyb3r-Jok3 yes i am not seeing any thing related to cache header, also i dont think the responses are being cached so there is no way to verify

afkOP•11/1/23, 3:46 AM

Also wanted to know if my implementation is correct or am i doing some mistake

afkOP•11/4/23, 8:08 AM

hello @Chaika can you also have a look at my issue i have been waiting for someone to point what i am doing wrong please help me out

afkOP•11/4/23, 8:09 AM

i read through some of your older answers as well tried to implement that i understood but it still doesn't seems to work

afkOP•11/4/23, 8:09 AM

sorry for tagging but i am stuck and no one is replying after a single message

Aafk Also wanted to know if my implementation is correct or am i doing some mistake

Cyb3r-Jak3•11/4/23, 12:36 PM

You are just returning the JSON data not a response with cache headers. Try using
return c.json(res, headers: {'cache-control': 'max-age=3600'});return c.json(res, headers: {'cache-control': 'max-age=3600'});

CCyb3r-Jak3 You are just returning the JSON data not a response with cache headers. Try usin...

afkOP•11/4/23, 4:59 PM

understood, @Cyb3r-Jok3 this cache header i have added not and this shows up but

cf-cache-status

cf-cache-status

doesnt shows up in header so i have no idea if its already cached in edge or not.

Aafk understood, @Cyb3r-Jok3 this cache header i have added not and this shows up bu...

Cyb3r-Jak3•11/4/23, 7:14 PM

cf-cache is a specfic header from cloudflare that indicate cache status. Workers run before the cache so the header will no be present unless you add it

Adi•11/6/23, 5:41 AM

Just as an FYI, you can also use Hono's cache middleware - https://hono.dev/middleware/builtin/cache
It does mostly the same thing as others have already suggested

How to Cache API response, with Hono JS & workers

Similar Threads

Similar Threads

Similar Threads