How to call a server action without a form?

[nareshbhatia]

I have a Server Component that uses a Server Action to toggle the favorite status of a movie. See below:

I have made this work using a form - I have to click on the heart icon (that works like a checkbox) and then click on the submit button. However that's not a great user interface. How can I do this without clicking on the submit button? I can think of removing the checkbox from the form and using the onClick() event to call the server action, but that would force me to make the component a client component. What's the best way to do this?

Here's my repo and the relevant code pasted below:

import { revalidatePath } from 'next/cache';

export interface FavoriteToggleProps {
  movieId: string;
  checked: boolean;
}

export function FavoriteToggle({ movieId, checked }: FavoriteToggleProps) {
  async function updateFavorite(data: FormData) {
    'use server';
    const movieId = data.get('movieId') as string;
    const favorite = data.get('favorite');

    const { API_URL } = process.env;
    const url = `${API_URL}/movies/${movieId}`;
    await fetch(url, {
      method: 'PATCH',
      body: JSON.stringify({
        favorite: favorite !== null,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });

    revalidatePath('/movie-magic-rsc');
  }

  return (
    <form action={updateFavorite}>
      <input id="movieId" name="movieId" type="hidden" value={movieId} />
      <label className="relative inline-flex cursor-pointer items-center">
        <input
          defaultChecked={checked}
          id="favorite"
          name="favorite"
          type="checkbox"
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

[Nadeera3784]

Hi @nareshbhatia,
You can set the submit button as hidden.
for example:

import { revalidatePath } from 'next/cache';

export interface FavoriteToggleProps {
  movieId: string;
  checked: boolean;
}

export function FavoriteToggle({ movieId, checked }: FavoriteToggleProps) {
  async function updateFavorite() {
    'use server';
    const { API_URL } = process.env;
    const url = `${API_URL}/movies/${movieId}`;
    await fetch(url, {
      method: 'PATCH',
      body: JSON.stringify({
        favorite: checked !== null,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });

    revalidatePath('/movie-magic-rsc');
  }

  return (
    <div>
      <input
        id="movieId"
        name="movieId"
        type="hidden"
        value={movieId}
      />
      <button
        type="submit"
        hidden
        onClick={updateFavorite}
      >
        Toggle Favorite
      </button>
    </div>
  );
}

When the user clicks on the button, the updateFavorite() function will be called, which will make a PATCH request to the server to update the favorite status of the movie. The revalidatePath() function will then be called to invalidate the cache for the /movie-magic-rsc route, so that the browser will fetch the latest data from the server.

[nareshbhatia]

Hi @Nadeera3784, thank you for your response.

I tried your suggestion, but there are two problems with it:

1. Since the submit button is hidden, it can't be clicked and hence the server action updateFavorite will not be called.
2. The server action updateFavorite() is not able to access the component props movieId & checked. I couldn't find any documentation on why that's the case. It would be good for someone to explain. To work around this issue, I am passing the two parameters to the server action.

Here's my modified code, where I have removed the submit button completely and trying to trigger the server action directly when the checkbox is clicked. See the code below:

import { revalidatePath } from 'next/cache';

export interface FavoriteToggleProps {
  movieId: string;
  checked: boolean;
}

export function FavoriteToggle({ movieId, checked }: FavoriteToggleProps) {
  async function updateFavorite(movieId: string, favorite: boolean) {
    'use server';
    const { API_URL } = process.env;
    const url = `${API_URL}/movies/${movieId}`;
    console.log('----> HTTP PATCH', url, 'favorite =', favorite);
    await fetch(url, {
      method: 'PATCH',
      body: JSON.stringify({
        favorite,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });

    revalidatePath('/movie-magic-rsc');
  }

  return (
    <label className="relative inline-flex cursor-pointer items-center">
      <input
        defaultChecked={checked}
        id="favorite"
        name="favorite"
        // eslint-disable-next-line @typescript-eslint/no-misused-promises
        onClick={async () => updateFavorite(movieId, !checked)}
        type="checkbox"
      />
    </label>
  );
}

Now I am getting an unhandled runtime error:

Error: Event handlers cannot be passed to Client Component props.
  <input defaultChecked={false} id=... name=... onClick={function} type=...>
                                                        ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

What this means is that we can't use onClick in a server component. If I convert this to a client component, then I can't use a server action in it. Not sure if there is a good solution.

cc: @leerob, @timneutkens

[robodove]

https://nextjs.org/docs/app/api-reference/functions/server-actions#invocation:~:text=Custom%20Invocation%20with%20startTransition%3A%20Invoke%20Server%20Actions%20without%20using%20action%20or%20formAction%20by%20using%20startTransition.%20This%20method%20disables

Custom Invocation with startTransition: Invoke Server Actions without using action or formAction by using startTransition. This method disables Progressive Enhancement.

// action.ts
"use server";

 export async function updateFavorite(movieId: string, favorite: boolean) {
    'use server';
    const { API_URL } = process.env;
    const url = `${API_URL}/movies/${movieId}`;
    console.log('----> HTTP PATCH', url, 'favorite =', favorite);
    await fetch(url, {
      method: 'PATCH',
      body: JSON.stringify({
        favorite,
      }),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });

    revalidatePath('/movie-magic-rsc');
  }

//CustomInput.tsx
"use client";
import { useTransition } from "react";
import { updateFavorite } from "./action";

export const CustomInput = ({ value, movieId }: { value?: any; movieId: string }) => {
  const [pending, startTransition] = useTransition()

  return (
      <label className="relative inline-flex cursor-pointer items-center">
        <input
          defaultChecked={checked}
          id="favorite"
          name="favorite"
         onChange={(e) => {
           const nextValue = e.target.checked;
           startTransition(() => {
             await updateFavorite(movieId, nextValue);
           })
         })
          type="checkbox"
        />
      </label>
  )
}

Sooomething like that,

note that your page will not refresh and you may have to manually toggle the value (since progressive enhancement is disabled)

Also important read on NextJS Blog

[nareshbhatia]

Thanks, @robodove. I will give it a shot.