Caching when using Firebase Admin SDK

[HStromfelt]

Summary

Hey there! I have a general question about caching. I am trying to reduce my firestore reads and wanted to tackle it using the various caching options that NextJS offers.

Since I am using firestore and hosting API routes in my NextJS project, I cannot use the fetch( , {next: { revalidate }}) approach. (I did think about using internal API calls but this does not seem to be advised).
Instead I have opted for wrapping my firestore get functions in React's cache, e.g.

const get = cache(async (sid: string, classId: string): Promise<StoryLineClass> => {
  console.log("getStoryLineClass", sid, classId)
  // Get the class document from the database
  const classDoc = await db.doc(`storyLines/${sid}/classes/${classId}`).get()

  // If the class document doesn't exist, return a 404 message
  if (!classDoc.exists) throw new Error("Class not found")

  // Get the class data from the document
  const classData = { id: classId, ...classDoc.data() } as StoryLineClass

  // Return the class data
  return classData
})

From what I gather, the way to invalidate these caches is via the
export const revalidate = 60 // cache for 60 seconds
in e.g. my page.tsx files.

I have a couple problems here:

1. I am finding it hard to "see" if this is working or not. The logs show cache HIT/MISS when using the fetch approach, but the cache() approach does not seem to produce the same kinds of logs. Is this normal?
2. I would like to set revalidation time limits on each function separately. It would be great if cache took a second parameter along the lines of cache(fn, revalidateAfter) but I can't find good docs on how React's cache really works.
3. I would also like to force revalidation on POST/PUT/PATCH/DELETE activity. I understand that NextJS has the revalidateTag method but it doesn't seem to work for cache? Again, it would be so cool if cache could be extended to perhaps have something like cache(fn, { tags, revalidateAfter } ).

Thanks. I've been Googling/ChatGPT'ing around with no luck. I also tried the NextJS Discord but did not get far.

Additional information

No response

Example

No response

[ben519]

Hey, did you ever get answers to this? I'm searching for the same thing.

[HStromfelt]

Unfortunately no. Ended up setting up a whole API server just so I could control the caching...
I'm hoping this will be addressed at some point.

[ben519]

Oof! What a pain. Thanks for the quick reply! I'll let you know if I find a solution.

[HStromfelt]

Thank you and good luck!

[ben519]

Wrapping my functions in unstable_cache seems to do the trick.

[bis0072]

having the same issue

[saturn72]

I believe this is what you are looking for: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#example

Replace db.tem.findUnique(...) with firebase's functionality

[imhardikdesai]

@HStromfelt
Next.js offers an experiential cache function designed to write to the Next.js Data Cache, functioning similarly to the extended fetch API.

import { unstable_cache as cache } from "next/cache";

const getUserDetailsByUsernameImpl = async (username: string): Promise<{ userDetails: any; message?: string }> => {
  const q = DB.collection('users').where('username', '==', username)
  const querySnapshot = await q.get()
  if (querySnapshot.empty) {
    return { userDetails: null, message: 'User not found' }
  }

  const userDetails = querySnapshot.docs[0].data()
  return { userDetails }
}

const getUserDetailsByUsername = cache(
  /* fetch function */ getUserDetailsByUsernameImpl,
  /* unique key     */ ["getUserDetailsByUsername"],
  /* options        */ {
    tags: ["getUserDetailsByUsername"],
    revalidate: 60 * 60 * 24 /* same as fetch.revalidate */
  }
)

Functioning similar to caching in the fetch API, it allows setting a revalidate option to define when cached data should become stale or invoking revalidateTag("getUserDetailsByUsername") to instantly invalidate the cache.

It accepts 3 parameters:

• A fetch function to be cached
• An array of key parts ensuring global uniqueness when combined.
• An options object containing:
  tags: An array of keys usable with revalidateTag.
  revalidate: The interval in seconds after which the cache should be revalidated.
  Read more in the documentation: https://nextjs.org/docs/app/api-reference/functions/unstable_cache

[HStromfelt]

Thanks, this is a great answer - I can see that @ben519 had proposed the same approach and it seems perfect. Thanks to both of you :)