Having trouble exporting constants and utilizing the "use server" function in actions.ts within Next.js?

Question

Having trouble exporting constants and utilizing the "use server" function in actions.ts within Next.js?

I am currently developing an application using Next.js and I have a file called actions.ts where all my functions for fetching and adding data from my Vercel Postgres store are stored. After these functions, I want to revalidate the data so I included export const revalidate = 1 in order to achieve this. However, it seems that setting it to use server is also necessary because without it, @vercel/postgres cannot locate the CONNECTION_URL. The issue is that the revalidate variable does not work with use server.

What steps should I take?

Below is 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]
}

// Other functions omitted for brevity

export async function deleteMilestone(id: string, project_id: string) {
    await sql`DELETE FROM milestones WHERE id = ${id};`
        revalidatePath("/projects/[slug]")
}

An error occurs when trying to export constants while using use server. I am unsure of what actions to take as I require both functionalities in my code.

typescript postgresql next.js vercel

Answer 1

Answer №1

When implementing the use server directive, certain operations are restricted, such as directly exporting constants. In scenarios where server-side re-validation is required, a different approach must be taken. Here is a modified code snippet that can be utilized to achieve the desired outcome.

"use server";

import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";

// Function for retrieving 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]");
}

// Demonstration of how the revalidate function can be used.
export function exampleUsage() {
  const revalidateValue = getRevalidate();
  // Perform actions with revalidateValue here.
}

Answer 2

When implementing the use server directive, certain operations are restricted, such as directly exporting constants. In scenarios where server-side re-validation is required, a different approach must be taken. Here is a modified code snippet that can be utilized to achieve the desired outcome.

"use server";

import { sql } from "@vercel/postgres";
import { revalidatePath } from "next/cache";

// Function for retrieving 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]");
}

// Demonstration of how the revalidate function can be used.
export function exampleUsage() {
  const revalidateValue = getRevalidate();
  // Perform actions with revalidateValue here.
}

Having trouble exporting constants and utilizing the "use server" function in actions.ts within Next.js?

Answer №1

Similar questions

Creating click event handler functions using TypeScript

Verify if the specified key is present in the type parameter and if it corresponds to the expected data type in the value parameter

The updating of the page in Angular 4.4 is not reflecting the changes made to the model

What could be causing the error message "Error: Failed to retrieve component for route: '/settings'" to occur in next js?

I encountered the error message "The property you are trying to access does not exist on the type 'never'" while attempting to retrieve JSON data from the API response

Adding data to a join table with Sequelize

Tips for customizing the legend color in Angular-chart.js

"What is the best way to access and extract data from a nested json file on an

Utilizing useLocation for Defining Text Styles

Implementing Dynamic Component Rendering in React Native with Typescript

Executing NestJS code after applying a pipe but before reaching the method handler

Creating comprehensive and elaborate intellisense documentation for Typescript Union Types

Error in Angular 7: ActivatedRoute paramId returns null value

Automatically selecting the country phone code based on the country dropdown selection

React-query v5 - Updating or fetching outdated query

Breaking a relation constraint due to deferred constraints on foreign keys

Passing parameters in React classes is a crucial aspect of creating

Challenges when building a production version of an Expo app with Typescript

What steps should I take to fix the Typescript error showing up in my Next.js route?

How can I prevent having to repeat the getStaticProps function on multiple pages within NextJS?