Docs

clientAction

In addition to (or in place of) your action, you may define a clientAction function that will execute on the client.

Each route can define a clientAction function that handles mutations:

export const clientAction = async ({
  request,
  params,
  serverAction,
}: ClientActionFunctionArgs) => {
  invalidateClientSideCache();
  const data = await serverAction();
  return data;
};

This function is only ever run on the client, and can be used in a few ways:

  • Instead of a server action for full-client routes
  • To use alongside a clientLoader cache by invalidating the cache on mutations
  • To facilitate a migration from React Router

#Arguments

#params

This function receives the same params argument as an action.

#request

This function receives the same request argument as an action.

#serverAction

serverAction is an asynchronous function that makes the fetch call to the server action for this route.

See also: