Next.js Discord

Discord Forum

Purge cache from Redis in a Server action

Unanswered
Chinese softshell turtle posted this in #help-forum
Open in Discord
Chinese softshell turtleOP
Hello everyone,

I'm currently facing an issue with my NextJS app and could use some guidance on the best approach.

I'm building a comments component that retrieves and displays data from Redis (using Upstash) via a server component. When users submit a new comment, I use a server action to append the new entry to the Redis list and then call revalidatePath() to refresh the page. However, it seems like the initial data from Redis isn't being purged or updated as expected.

Is there a known limitation with this approach, or is there a better way to ensure that the Redis data is properly refreshed after submission? Any advice would be greatly appreciated!

Thanks in advance!

3 Replies

Spectacled bear
Can you share the code snippet?
Chinese softshell turtleOP
Yes!

I get the comments data in the server component from this command. I send as a prop to a client component. And loop directly on the UI. I do not store in a state.
   const comments = (await redis.lrange(
          `comments:${item.id}`,
          0,
          -1,
        )) as ReviewComment[];


The form:
 <form
      className="mt-auto bg-dark-gray"
      ref={formRef}
      action={async (formData) => {
        formRef.current?.reset();
        setTextareaValue("");

        await CreateReviewComment(formData);
      }}
    >
      <Input
        name="message"
        id="message"
        placeholder="Add a comment"
        className="mb-4 border-none"
        onChange={(e) => setTextareaValue(e.target.value)}
        value={textareaValue}
      ></Input>
      <input type="hidden" name="assetId" value={assetId} />
      <input type="hidden" name="projectId" value={projectId} />

      {videoRef && (
        <input type="hidden" name="videoTimestamp" value={videoDuration} />
      )}

      <Button
        type="submit"
        variant={"primary"}
        disabled={textareaValue === ""}
        className="sr-only"
      >
        Send
      </Button>
    </form>
The server action:
export async function CreateReviewComment(data: FormData) {
  const assetId = data.get("assetId");
  const projectId = data.get("projectId");
  const message = data.get("message") as string;
  const videoTimestamp = data.get("videoTimestamp") as string;

  const { userId }: { userId: string | null } = auth();

  if (!userId) {
    throw new Error("User not found");
  }

  const user = await prisma.user.findUnique({
    where: {
      clerkId: userId,
    },
  });

  if (!user) {
    throw new Error("User not found");
  }

  const comment: ReviewComment = {
    clerkID: userId,
    name: user.name,
    timestamp: new Date().toISOString(),
    message,
    videoTimestamp: formatVideoTimestamp(Number(videoTimestamp)),
  };

  await redis.lpush(`comments:${assetId}`, JSON.stringify(comment));

  revalidatePath(`/projects/${projectId}`);
}