ljonel Posts - Convex Community

ljonel

•Created by ljonel on 10/12/2024 in #support-community

Nextjs server actions does not work with revalidatePath

Hi there! I'm struggling with basic data refreshing on a simple next14 app directory page.tsx. Basically this is all code taken from https://docs.convex.dev/client/react/nextjs/server-rendering#server-actions-and-route-handlers. /src/app/testpage

const page = async () => {
    const token = convexAuthNextjsToken();
    const workspaces = await fetchQuery(api.queries.workspaces.get, {}, { token });

    async function createTask(formData: FormData) {
        "use server";

        await fetchMutation(
            api.queries.workspaces.create,
            {
                name: formData.get("name") as string,
            },
            { token },
        );
        revalidatePath("/testpage");
    }
    return (
        <div>
            <form action={createTask}>
                <Input type="text" name="name" />
                <Button type="submit">Submit</Button>
            </form>

            {workspaces?.map((x) => <p>{x.name}</p>)}
        </div>
    );
};

export default page;

const page = async () => {
    const token = convexAuthNextjsToken();
    const workspaces = await fetchQuery(api.queries.workspaces.get, {}, { token });

    async function createTask(formData: FormData) {
        "use server";

        await fetchMutation(
            api.queries.workspaces.create,
            {
                name: formData.get("name") as string,
            },
            { token },
        );
        revalidatePath("/testpage");
    }
    return (
        <div>
            <form action={createTask}>
                <Input type="text" name="name" />
                <Button type="submit">Submit</Button>
            </form>

            {workspaces?.map((x) => <p>{x.name}</p>)}
        </div>
    );
};

export default page;

Everything works quite well. The workspace is created, but the page data does not refresh when using revalidatePath. I'm wondering what could be causing this problem and does it work for anyone else? And will it be possible to revalidate the queries using the next tags? I can add that I tried using preloadQuery and usePreloadedQuery. Then everything works and refreshes. But it would be nice however to use revalidate method.

12 replies