Next.js Discord

Discord Forum

How to cache routes fetched from client component with use cache

Answered
European pilchard posted this in #help-forum
Open in Discord
Avatar
European pilchardOP
Hi, I'm trying to implement the new dynamicIO funcions into my code, but I'm running into this issue. I want to cache a route with the "use cache" directive, but I'd also like to use the cacheLife() and cacheTag() functions, I have no idea how.
I tried to use it in the fetch function, but I can't use "use cache" on client. I tried to use it on top of the route file, but I can't use the cache functions there and when I tried to put it inside the exported function, it conflicts with nextUrl searchparams.
There's not much documentation on it yet, so I'm grateful for any information from someone who has any experience with it.
Answered by European pilchard
I was using prisma to get some data from the database. I needed to make a function inside the route export function and use the directive with the functions there. As I was getting a json object with some non-plain values, I needed to wrap it like this: JSON.parse(JSON.stringify(response)) so I could get it from the server function to the client(?) route. In the end, it looks like this:
export async function GET( req: NextRequest ) {
    const searchParams = req.nextUrl.searchParams
    const id: string | null = searchParams.get('id')

    const getData = async (id: string) => {
      "use cache"

      cacheLife("hours");
      cacheTag("tag");
      return JSON.parse(JSON.stringify(await prisma.model.findMany({
        where: {
            id: id
        },
        ...
      })))
    }

    if(!id){
      return NextResponse.json({error: "Please provide a id"}, {status: 400})
    }
    try{
      const data = await getData(id);
      return NextResponse.json(data, {status: 200})
    }catch(error){
        return NextResponse.json(error, {status: 500})
    }
}
View full answer

2 Replies

Avatar
European pilchardOP
Okay, I've figured it out. I'm not sure if it's the best but I'm gonna write it down here so someone else can find it.
Avatar
European pilchardOP
I was using prisma to get some data from the database. I needed to make a function inside the route export function and use the directive with the functions there. As I was getting a json object with some non-plain values, I needed to wrap it like this: JSON.parse(JSON.stringify(response)) so I could get it from the server function to the client(?) route. In the end, it looks like this:
export async function GET( req: NextRequest ) {
    const searchParams = req.nextUrl.searchParams
    const id: string | null = searchParams.get('id')

    const getData = async (id: string) => {
      "use cache"

      cacheLife("hours");
      cacheTag("tag");
      return JSON.parse(JSON.stringify(await prisma.model.findMany({
        where: {
            id: id
        },
        ...
      })))
    }

    if(!id){
      return NextResponse.json({error: "Please provide a id"}, {status: 400})
    }
    try{
      const data = await getData(id);
      return NextResponse.json(data, {status: 200})
    }catch(error){
        return NextResponse.json(error, {status: 500})
    }
}
Answer