Revalidating a cache in a server component ('use cache')

[LaurinBrechter]

Summary

I am using the new 'use cache' directive and have a function getUserResources that is cache tagged and a function addUserResource that adds a new resource when the user visits the resource. The function addUserResource should invalidate the tag for getResources but, since I am running it inside a server component I can't do that and I get the error message below.

export async function getUserResources(
  userId: string,
  isFinished: boolean | undefined,
) {
  "use cache";
  cacheTag(`userResources-${userId}`);

export async function addUserResource(
  resourceId: string,
  userId: string,
  tx?: any,
) {
  console.log("addUserResource", resourceId, userId);
  revalidateTag(`userResources-${userId}`);

Error: Route /learn/[base]/resource/[resourceId] used "revalidateTag userResources-0inORbbPg60rwuhkfuTSwF1UGipWsF4o" during render which is unsupported. To ensure revalidation is performed consistently it must always happen outside of renders and cached functions. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering
    at addUserResource (src/lib/crud/addUserResource.ts:12:16)
    at <anonymous> (src/lib/serverUtils.ts:26:28)
    at ResourcePage (src/app/learn/[base]/resource/[resourceId]/page.tsx:50:38)
  10 | ) {
  11 |   // console.log("addUserResource", resourceId, userId);
> 12 |   revalidateTag(`userResources-${userId}`);
     |                ^
  13 |   try {
  14 |     await (tx ?? db)
  15 |       .insert(resourceUserTable) {

My current solution is to just use the API route for adding a resource but I was wondering if calling the function with revalidateTag is possible somehow

Additional information

No response

Example

No response

[icyJoseph]

Yeah, calling this as you render is not supported... but there's an API called after, which maybe can do this? https://nextjs.org/docs/app/api-reference/functions/after

I see a minor, kind of issue, your page renders, have a side effect, and that's maybe not ideal... GET requests, should be designed to be idempotent, and adding a resource, maybe is not necessarily so?

What is it you are trying to accomplish?

[LaurinBrechter]

Thanks for the response, I will check out the after API. The addUserResource is behind a POST request and adds the resource only if it didn't exist before (with an onConflictDoNothing() in drizzle). The userResources relation in my db has a primary key on userId and resourceId such that I don't insert twice. But this way, instead of first checking if the entry for that user-resource combination exists and only then conditionally adding it (2 db calls), I am just trying to insert it always with just results in one db call. What do you think about this approach or is it better to first do a select to check if the record exists and only conditionally doing the insert?