Inconsistent caching behavior of "unstable_cache" for some Cosmos DB operations

[tmarinov82]

Summary

Our website displays application data to users. We’ve implemented two GET functions that cache their results using unstable_cache from Next.js:

1. appsGet: Fetches all applications from the database.

2. appGet: Fetches a single application by its slug (ID).

Here is the code:

import { getContainer } from "./cosmosContainer";
import { unstable_cache } from 'next/cache'


export const appsGet = unstable_cache(async () => {

  const container = getContainer();

  const { resources: items } = await container.items
    .query('SELECT * FROM c')
    .fetchAll();
  console.log("fetching all apps")
  return items;
},
  ['apps'],
  { revalidate: false, tags: ['apps'] }
)

export const appGet = unstable_cache(async (slug) => {

  const container = getContainer();

  const { resource: item } = await container.item(slug, slug).read();
  console.log("fetching app:", slug)
  return item;
},
  ['app'],
  { revalidate: false, tags: ['app'] }
)

Under the /apps route, we use the following component:

import { appGet, appsGet } from "@/app/lib/cosmosOperations"
import Link from "next/link";
import { Suspense } from "react";


async function AppsTable() {
  const apps = await appsGet();
  await appGet("027fb347-5eee-4223-8696-648210c97215");

  return (
    <>

      {apps.map(app => <p key={app.id}><Link href={`/apps/${app.id}`}>{app.id}</Link></p>)}
    </>
  )
}

export default async function AppTable() {

  return (
    <main>
      <h1>Apps</h1>
      <Suspense fallback={<p>Fetching Apps...</p>}>
        <AppsTable />
      </Suspense>
     </main>
  )
}

This renders links to all apps and calls both appsGet() and appGet().
In the dynamic route /apps/[appSlug], we tried two component versions.
1st version – Using appsGet():

import { appGet,appsGet} from "@/app/lib/cosmosOperations";
import { notFound } from "next/navigation";

export default async function App({
  params,
}: {
  params: Promise<{ appSlug: string }>
}) {
  const { appSlug } = await params;
  const apps = await appsGet();
  const currentApp = apps.find(app => app.id === appSlug);
 
  if (!currentApp) {
    notFound();
  }

  return (
    <main>
      {JSON.stringify(currentApp)}
    </main>
  )
}

Issue: This version always queries the database instead of using the cache.

Version 2 – Using appGet()

import { appGet,appsGet} from "@/app/lib/cosmosOperations";
import { notFound } from "next/navigation";

export default async function App({
  params,
}: {
  params: Promise<{ appSlug: string }>
}) {
  const { appSlug } = await params;
  const currentApp = await appGet(appSlug)
  if (!currentApp) {
    notFound();
  }

  return (
    <main>
      {JSON.stringify(currentApp)}
    </main>
  )
}

This time when I access the app which is cached in other component: await appGet("027fb347-5eee-4223-8696-648210c97215"); it gets the data from the cache it doesn't go to the database.

So my questions are: How can I use the cache from appsGet in the dynamic route component? Why I can use the cache from appGet, but not from appsGet in dynamic route component?

Additional information

No response

Example

No response

[icyJoseph]

Hi, what next.js version are you using?

[tmarinov82]

I am using next.js version 15.3.1

[tmarinov82]

We successfully narrow the root cause of the problem by tweaking the code a little bit. We use cosmos DB to store application data. We have tried to get application data through 2 different cosmos operations getCosmosApps (returns array with all applications) and getCosmosApp(returns array with only one application). These 2 operations use different cosmos API commands:

import { CosmosClient } from '@azure/cosmos';

const endpoint = process.env.COSMOS_ENDPOINT!;
const key = process.env.COSMOS_KEY!;
const databaseId = process.env.COSMOS_DATABASE!;

const client = new CosmosClient({ endpoint, key });

const getContainer = (containerId = "NextProvisioning") => {
  const database = client.database(databaseId);
  const container = database.container(containerId);
  return container;
};

// Gets all applications
export const getCosmosApps = async () => {
  const container = getContainer();
  const { resources: items } = await container.items.readAll().fetchAll();
  console.log("fetching all apps")
  return items;
}

//Get single application
export const getCosmosApp = async () => {
  const container = getContainer();
  const slug = "027fb347-5eee-4223-8696-648210c97215";
  const { resource: item } = await container.item(slug, slug).read();
  
  console.log("fetching app:", slug)
  return [item];
}

Then, we use unstable_cache to wrap around one of these two operations and cache the result:

import { unstable_cache } from 'next/cache'
// import { getCosmosApp } from './cosmosOperations';
import { getCosmosApps } from './cosmosOperations';

export const appsGet = unstable_cache(async () => {

  // THIS VERSION USE THE CACHE
  // const items:Array<{ [key: string]: string | number }> = await new Promise((resolve) => setTimeout(() => {
  //   resolve([{ id: "id1", appName: "app1" }, { id: "id2", appName: "app2" }])
  // }, 10000));

  // THIS VERSION USE THE CACHE
  // const items = await getCosmosApp();

  // THIS VERSION DOESN'T USE THE CACHE IT OUTPUTS THE CONSOLE LOG IN EVERY RENDER
  const items = await getCosmosApps();
  
  console.log("fetching3333 all apps")
  return items;
},
  ['apps'],
  { revalidate: false, tags: ['apps'] }
)

Depending on which operation we uncomment in the code the caching behavior is different as it is stated in the comments.
Then we use one page to display all applications - route /apps:

import { appsGet } from "@/app/lib/cachedFunctions"
import Link from "next/link";
import { Suspense } from "react";


async function AppsTable() {
  const apps = await appsGet();
  
  return (
    <>
      {apps.map(app => <p key={app.id}><Link href={`/apps/${app.id}`}>{app.id}</Link></p>)}
    </>
  )
}

export default async function AppTable() {

  return (
    <main>
      <h1>Apps</h1>
      <Suspense fallback={<p>Fetching Apps...</p>}>
        <AppsTable />
      </Suspense>
      <h1><Link href={`/apps/create`}>Create App</Link></h1>
    </main>
  )
}

And another to display single application -route /apps/[appSlug]:

import { appsGet } from "@/app/lib/cachedFunctions";

export default async function App({
  params,
}: {
  params: Promise<{ appSlug: string }>
}) {
  const { appSlug } = await params;
  const apps = await appsGet();
  const currentApp = apps.find(app => app.id === appSlug);

  return (
    <main>
      {JSON.stringify(currentApp)}
    </main>
  )
}

We observe console logs every time when we open /apps/[appSlug] route when in appsGet function we use
const items = await getCosmosApps()
This means the cache is not used in this situation .
When we use either
const items = await getCosmosApp()
or
const items:Array<{ [key: string]: string | number }> = await new Promise((resolve) => setTimeout(() => { resolve([{ id: "id1", appName: "app1" }, { id: "id2", appName: "app2" }]) }, 10000))
we don't observe console logs so the cache is used in this situation.

So why in this case different cosmos functions in combination with "unstable_cache" behave differently?

[tmarinov82]

When I set canary version it shows me that we hit 2 MB cache limit. This is why the cosmos operation which return more than 2 MB is not cached. I found a solution #48324