useServerAction<TArgs, TResult> function

ServerActionState<TArgs, TResult> useServerAction<TArgs, TResult>(ServerFunctionRef<TArgs, TResult> ref)

Binds a generated server function to React pending/result/error state.

This is the ergonomic building block for buttons and form submit handlers:

final action = useServerAction(greetRef);
button(
  disabled: action.pending,
  onClick: (_) => action.invoke((name: 'Ada')),
  children: [Text(action.data ?? 'Greet')],
);

Implementation

ServerActionState<TArgs, TResult> useServerAction<TArgs, TResult>(
  ServerFunctionRef<TArgs, TResult> ref,
) {
  final (pending, setPending) = useState(false);
  final (data, setData) = useState<TResult?>(null);
  final (error, setError) = useState<Object?>(null);

  Future<TResult> invoke(TArgs arguments) async {
    setPending(true);
    setError(null);
    try {
      final result = await currentServerFunctionClient.invoke(ref, arguments);
      setData(result);
      return result;
    } catch (caught) {
      setError(caught);
      rethrow;
    } finally {
      setPending(false);
    }
  }

  return ServerActionState(
    pending: pending,
    data: data,
    error: error,
    invoke: invoke,
  );
}