Next.js Discord

Discord Forum

Caching ORM responses?

Unanswered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
What is the recommended way to cache something like a prisma response?
I have a page.tsx and in it I defined a revalidate variable and I have a getFirstPost function that fetches the first post:
export const revalidate = 3600; // 1 hour

const getFirstPost = async () => {
  const latestPost = await prisma.post.findFirst({
    orderBy: { createdAt: "desc" },
  });

  return latestPost;
};


in the page function I go
const latestPost = await getFirstPost();

and then render the data. Even tho I defined the revalidate variable every time I refresh the page (on dev and on prod) I see prisma making a new query in console:
prisma:query SELECT `t3approuter`.`Post`.`id`, `t3approuter`.`Post`.`text`, `t3approuter`.`Post`.`createdAt`, `t3approuter`.`Post`.`updatedAt`, `t3approuter`.`Post`.`createdById` FROM `t3approuter`.`Post` WHERE 1=1 ORDER BY `t3approuter`.`Post`.`createdAt` DESC LIMIT ? OFFSET ?


Does the cache get wiped on refresh or am I doing something wrong here?

16 Replies

Ojos AzulesOP
bump - hoping for some answer
tafutada777
@Ojos Azules Is function defined in the same file, page.tsx or import?
Ojos AzulesOP
getFirstPost is defined in the top of page.tsx
tafutada777
im not pretty sure but can you try the func inline like my code sample at
https://github.com/tfutada/zenn-prisma/blob/main/app/prisma1/page.tsx
my code works on Vercel right. i mean, prisma won't be invoked with in the 60s window.
Ojos AzulesOP
Thanks 🙂 taking a look now
North Pacific hake
@Ojos Azules are you by any chance making that call in a client component? Could you send the code of the whole component (with imports and everything)?
@North Pacific hake <@183647046564184065> are you by any chance making that call in a client component? Could you send the code of the whole component (with imports and everything)?
Ojos AzulesOP
this is the page
import Link from "next/link";
import { Button } from "~/components/ui/button";
import { prisma } from "~/server/db";

import { createPost } from "../actions";

export const revalidate = 3600; // 1 hour

const getFirstPost = async () => {
  const latestPost = await prisma.post.findFirst({
    orderBy: { createdAt: "desc" },
  });

  return latestPost;
};

export default async function PostsPage() {
  const latestPost = await getFirstPost();

  return (
    <div className="w-full max-w-xs">
      <Link href="/">Home page</Link>
      {latestPost ? (
        <p className="text-white">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={createPost} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}
North Pacific hake
It's still not fixed?
Ojos AzulesOP
everytime I refresh the page I see the same query
prisma:query SELECT `t3approuter`.`Post`.`id`, `t3approuter`.`Post`.`text`, `t3approuter`.`Post`.`createdAt`, `t3approuter`.`Post`.`updatedAt`, `t3approuter`.`Post`.`createdById` FROM `t3approuter`.`Post` WHERE 1=1 ORDER BY `t3approuter`.`Post`.`createdAt` DESC LIMIT ? OFFSET ?


so I guess not
on prod and on dev
tafutada777
do you host it on Vercel?
Ojos AzulesOP
im not hosting it anywhere rn just running it on my mac
tafutada777
okay. once you deploy it on Vercel, it works. You don't want statically generated while developing and hot reloading on ur mac.
@tafutada777 okay. once you deploy it on Vercel, it works. You don't want statically generated while developing and hot reloading on ur mac.
Ojos AzulesOP
Caching isn't limited to hosting on Vercel it should work anywhere
bumping this again hoping someone has a solution