server-actions

Server Actions with Database Operations

Overview

Best practices for implementing server actions that interact with the database through abstracted query and mutation modules.

• File Organization

  • Place all server actions in app/actions/ directory
  • Group related actions in subdirectories by feature
  • Place database operations in separate query/mutation modules

  app/
  ├── actions/
  │   ├── auth/
  │   │   ├── login.ts
  │   │   └── register.ts
  │   └── organization/
  │       ├── create.ts
  │       └── update.ts
  lib/
  ├── data/
  │   ├── mutations/
  │   │   └── organizations.ts
  │   └── queries/
  │       └── organizations.ts
  

• Server Action Implementation

  • Always use 'use server' directive

  • Import mutations/queries from lib/data

    // ✅ DO: Use abstracted database operations
    'use server';
    
    import { createOrganization } from '@/lib/data/mutations/organizations';
    import { getUserOrganizations } from '@/lib/data/queries/organizations';
    import { redirect } from 'next/navigation';
    
    export async function createUserOrganization(formData: FormData) {
      const name = formData.get('name') as string;
      const logoUrl = formData.get('logo_url') as string;
    
      // Get user from auth if needed
      const {
        data: { user },
      } = await supabase.auth.getUser();
    
      if (!user) {
        return redirect('/login?error=No user found');
      }
    
      const { error } = await createOrganization(name, logoUrl, user.id);
    
      if (error) {
        return redirect('/login/organization?error=Could not create organization');
      }
    
      return redirect('/welcome');
    }
    
    export async function fetchUserOrganizations() {
      const organizations = await getUserOrganizations();
      return organizations;
    }
    

    // ❌ DON'T: Mix database logic in server actions
    'use server';
    
    import { createDrizzleSupabaseClient } from '@/db';
    import { organizations } from '@/db/schema';
    
    export async function createUserOrganization(formData: FormData) {
      const db = await createDrizzleSupabaseClient();
      await db.rls(async (tx) => {
        await tx.insert(organizations).values({
          name: formData.get('name') as string,
          logo_url: formData.get('logo_url') as string,
        });
      });
    }