How do I use the Local API with tag revalidation in Next? (3.0-beta)

rezzzy7 months ago

2

const getPublishedPosts = unstable_cache(
  async () => {
    const payload = await getPayload({ config: configPromise });

    const data: PaginatedDocs<PostType> = await payload.find({
      collection: "posts",
      where: {
        _status: {
          equals: "published",
        },
      },
    });

    return data?.docs || [];
  },
  ["page_posts"],
  { tags: ["posts"] }
);


export default async function Posts() {
  const posts = await getPublishedPosts();

  return (
    // ... display the posts  
  )
}

• 

  Deleted User11 months ago

  https://nextjs.org/docs/app/api-reference/functions/unstable_cache
  
  

  You can try next js unstable_cache which allows giving keys to functions which can be called to revalidate from anywhere

• 

  rezzzy11 months ago

  I am currently fetching from my

  posts

  collection like this:

  
  
  

  import { getPayload } from "payload";
  import configPromise from "@payload-config";
  import { Post as PostType } from "@/payload-types";
  import { PaginatedDocs } from "payload/database";
  
  export default async function Posts() {
    const payload = await getPayload({ config: configPromise });
    
    // How can this be stored with a specific cache key for use with revalidateTag?
    const data: PaginatedDocs<PostType> = await payload.find({
      collection: "posts",
    });
  
    return (
      // ... display the posts  
    )
  }

  
  
  

  How (if possible) can I cache this data using a cache tag?

  
  
  

  I am aware of the

  afterChange

  collection hook, which I have already setup with an

  /api/revalidate

  route handler that will

  revalidateTag

  with a chosen key. I just need my data to be stored with a key I specified.

  
  
  

  Am I overlooking something? Can I not use

  revalidateTag

  ?

  
  
  

  Thanks in advance!