I’m making an app in Next.js and have an actions.ts file containing all my functions to fetch and add data from my Vercel Postgres store. I want to revalidate the data after these functions, so I added export const revalidate = 1 to revalidate the data. This works, but I also need to set it to use server because otherwise @vercel/postgres can’t find the CONNECTION_URL. But, revalidate variable doesn’t work with use server
What should I do?
Here’s my code:
"use server"
import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";
export const revalidate = 1;
export async function fetchProjects() {
const { rows } = await sql`SELECT * FROM projects`
return rows
}
export async function fetchProjectById(id: string) {
const { rows } = await sql`SELECT * FROM projects WHERE id = ${id}`
return rows[0]
}
export async function fetchProjectMilestones(id: string) {
const { rows } = await sql`SELECT * FROM milestones WHERE project_id = ${id}`
return rows
}
export async function createProject(title: string, description: string ) {
try {
await sql`INSERT INTO projects (title, description) VALUES (${title}, ${description})`;
} catch(error) {
throw new Error("Failed to create new project.")
}
}
export async function createMilestone(title: string, description: string, due_date: Date, project_id: string) {
await sql`INSERT INTO milestones (title, description, due_date, project_id) VALUES (${title}, ${description}, ${due_date.toDateString()}, ${project_id})`
revalidatePath("/projects/[slug]")
}
export async function deleteMilestone(id: string, project_id: string) {
await sql`DELETE FROM milestones WHERE id = ${id};`
revalidatePath("/projects/[slug]")
}
This gives an error saying that I can’t export constants while using use server. I don’t know what to do because I need to add both.
When we use use server directive then it will restricts some operations, such as exporting constants directly. We need to use different approach when we are working with server-side re-validation so here is the modified code we can use to achieve desired output.
"use server";
import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";
// Function to get the revalidate value
function getRevalidate() {
return 1;
}
export async function fetchProjects() {
const { rows } = await sql`SELECT * FROM projects`;
return rows;
}
export async function fetchProjectById(id: string) {
const { rows } = await sql`SELECT * FROM projects WHERE id = ${id}`;
return rows[0];
}
export async function fetchProjectMilestones(id: string) {
const { rows } = await sql`SELECT * FROM milestones WHERE project_id = ${id}`;
return rows;
}
export async function createProject(title: string, description: string) {
try {
await sql`INSERT INTO projects (title, description) VALUES (${title}, ${description})`;
} catch (error) {
throw new Error("Failed to create new project.");
}
}
export async function createMilestone(title: string, description: string, due_date: Date, project_id: string) {
await sql`INSERT INTO milestones (title, description, due_date, project_id) VALUES (${title}, ${description}, ${due_date.toDateString()}, ${project_id})`;
revalidatePath("/projects/[slug]");
}
export async function deleteMilestone(id: string, project_id: string) {
await sql`DELETE FROM milestones WHERE id = ${id};`;
revalidatePath("/projects/[slug]");
}
// This is the example usage of the revalidate function.
export function exampleUsage() {
const revalidateValue = getRevalidate();
// Here we can do something with revalidateValue.
}
3