GET Endpoints in the Route Handler are cached by default.
https://nextjs.org/docs/app/building-your-application/routing/route-handlers#behavior

Also it looks like you are fetching your own Route Handler from a Client Component, which can make sense if the route handler is a webook for example.
In case your endpoint is just getting some catalog data from a database, you'd be better off to scratch that endpoint and do the await db.get.catalogitemsin a server component directly and pass the data down to your client component

Yeah i have been thinking about the server component but i wanna make it work and not avoid it. So you are saying i should make it a POST request instead? Here is the route code btw

No don't make it a POST (That would solve the problem) However it's a GET logically so it can remain being a GET.
You could either

 
export async function GET() {
  headers() // this will opt out of default caching
  ...
}

or

export const dynamic = 'force-dynamic' 
export async function GET() {
  ...
}

But yea overall this mongoose call should be converted into a server component. You are doing an extra round trip at the moment

Thank you, I will see if this solves the issue. Is there a documentation on the headers() and export const dynamic?

the link i posted

Oh my bad didn't see

so whats the difference between

next: { revalidate: 10 }

and

export const dynamic = 'force-dynamic' 

?

Good question. From my understanding all the options for revlidation in the fetch options are concerning the data cache
https://nextjs.org/docs/app/building-your-application/caching#data-cache. The caching of the GET endpoints is a different cache entirely.

In theory you can opt out of caching in your endpoint and still get stale data when you fetch it with

await fetch(`/api/...`, { cache: 'force-cache' })

for example and vice versa. The other way arround would be your example from this thread. (You opted out of the data cache using no-store or revalidate: 10, however the endpoint was still cached.

I could be wrong though i am not a caching expert

One is a fetch specific, the other is page specific

Priority is given to the fetch specific one, if nothing is present in the fetch call, the dynamic one is used