Local Options

The useAction hook in @vergestack/api-react allows you to configure its behavior by passing an optional options object. This object can include callback functions for different stages of the action execution. These local options override the global configuration.

Available Options

The useAction hook accepts an options object as its second argument with the following properties:

• onStart: Called when the action starts executing
• onSuccess: Called when the action is successful
• onError: Called when the action encounters one or more errors
• onComplete: Called after the action completes, regardless of success or failure
• initialData: Sets the initial data state

Usage Example

Here's an example of how to use the useAction hook with all available options:

import { useAction } from '@vergestack/api-react';
import { greetingAction } from './actions';
 
function MyComponent() {
  const { data, errors, execute } = useAction(greetingAction, {
    initialData: 'Hello',
    onStart: () => {
      console.log('Action started executing');
    },
    onSuccess: (data) => {
      console.log('Action succeeded with data:', data);
    },
    onError: (errors) => {
      console.error('Action failed with errors:', errors);
    },
    onComplete: () => {
      console.log('Action completed');
    }
  });
 
  // Rest of your component code
}

Callbacks

onStart

The onStart callback is triggered when the action starts executing. It doesn't receive any arguments.

onStart: () => void

onSuccess

The onSuccess callback is triggered when the action completes successfully. It receives the action's result data as its argument.

onSuccess: (data: OutputType) => void

onError

The onError callback is triggered when the action encounters an error. It receives a list of error objects.

onError: (errors: ApiErrorWithMetadata[]) => void

onComplete

The onComplete callback is executed after the action finishes, regardless of whether it succeeded or failed. It doesn't receive any arguments.

onComplete: () => void

Properties

initialData

The initialData property sets the initial data state.

initialData: OutputType;