CodingWithJamal•14mo ago

NextJs Server Actions + Convex not working

Im trying to use convex http client in nextjs server actions to submit data. However its not working. When i console log the form data, i get all my valid data. However the mutation does not submit to convex? It does not run at all and theres no errors i can see.

'use server';

import { convexClient } from '@/lib/convex';
import { api } from '../../convex/_generated/api';

export async function subscribeToWaitingList(formData: FormData) {
    try {
        let email = formData.get('email') as string | undefined;

        if (!email) throw new Error('Email is required');

        const check = await convexClient.query(api.waiting_list.alreadySubscribed, {
            email,
        })

        if(check === "subscribed") {
            return {
                success: false,
                error: 'You are already subscribed to the waiting list',
            }
        }

        await convexClient.mutation(api.waiting_list.create, {
            email,
        });

        return {
            success: true,
            error: null,
        }
    } catch (error: any) {
        return {
            success: false,
            error: error.message,
        };
    }
}

'use server';

import { convexClient } from '@/lib/convex';
import { api } from '../../convex/_generated/api';

export async function subscribeToWaitingList(formData: FormData) {
    try {
        let email = formData.get('email') as string | undefined;

        if (!email) throw new Error('Email is required');

        const check = await convexClient.query(api.waiting_list.alreadySubscribed, {
            email,
        })

        if(check === "subscribed") {
            return {
                success: false,
                error: 'You are already subscribed to the waiting list',
            }
        }

        await convexClient.mutation(api.waiting_list.create, {
            email,
        });

        return {
            success: true,
            error: null,
        }
    } catch (error: any) {
        return {
            success: false,
            error: error.message,
        };
    }
}

12 Replies

CodingWithJamalOP•14mo ago

Okay so after some testinf for some weird reason if i input my email in the waiting list form and submit it, it works but after deleting it from the dashboard and re-doing it, it does not submit the email. it only submits different emails but the same one never gets submitted again and added to the db? Not sure if the caching has a but or something

ian•14mo ago

Are you doing a console.log right before the await convexClient.mutation...? I would be helpful to determine whether the behavior is: - between the frontend HTML and the frontend JS - between the frontend JS and the Next.js endpoint - between the Next.js api endpoint and convex client - between the convex client and convex function body - in the convex function body I'm not 100% sure which of these is where your error is, but dropping console.log messages at each step should help diagnose

Michal Srb•14mo ago

Sounds like a caching issue? I know Next has a very thorny caching story atm. I'd try noStore if you're on Next.js 14. I don't think Next can tell that the mutation should not be cached. I would also combine the query and mutation on the Convex side, as written it's not transactional.

CodingWithJamalOP•14mo ago

okay thanks i have done console logs, but with nextjs server actions you dont need api routes. the function itself is the route (at a high level). So everything in this file only runs on the server. how can i disable cache in nextjs server actions? or do i need to do it on the component that im using the form in?

Michal Srb•14mo ago

Try https://nextjs.org/docs/app/api-reference/functions/unstable_noStore I'm not sure it affects server actions, the docs don't say

Functions: unstable_noStore | Next.js

API Reference for the unstable_noStore function.

Michal Srb•14mo ago

But these docs do suggest that fetch is cached everywhere, including in server actions: https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#caching-data

Data Fetching: Fetching, Caching, and Revalidating | Next.js

Learn how to fetch, cache, and revalidate data in your Next.js application.

Michal Srb•14mo ago

You can also use the Convex React client instead of trying to use Convex from the Next.js server (but I bet you know that already)

CodingWithJamalOP•14mo ago

thanks i will take a look

StoicWanderer•14mo ago

Hey Michal, I'm having the same issue, what does this actually mean? You mean the ConvexReactClient?

CodingWithJamalOP•14mo ago

but is the convex react client not client only? And if we need nodejs server we use the browser http client right?

Indy•14mo ago

You should be able the plain js client in node.js: https://docs.convex.dev/client/javascript#convex-client

JavaScript | Convex Developer Hub

Convex applications can be accessed from Node.js or any JavaScript runtime that

Michal Srb•14mo ago

Hey folks, I was suggesting that you could use Convex from the clientside, like we do in our quick start: https://docs.convex.dev/quickstart/nextjs You will need client-side auth (if you need auth).

Next.js Quickstart | Convex Developer Hub

Add Convex to a Next.js project

NextJs Server Actions + Convex not working

Did you find this page helpful?