Skip to Content
ビューコードエディター関数useExecuteAction

useExecuteAction

useExecuteAction は、ビューの表示時にアクションを実行するためのフックです。アクションの識別子とパラメータの値を指定することで、アクションを実行できます。

基本的な使い方

以下のようにhookを呼び出すだけでアクションを実行できます。

const App = () => {
    ...
    const { data, loading } = useExecuteAction("action-id", {
        company_name: '株式会社ベースマキナ',
        user_id: 123,
        checked: true,
        created: '2023-01-01',
    })
 
    return (
        <>
            {loading && <LoadingIndicator />}
            {data && <Table rows={data.results[0].success ?? []}/>}
        </>
    )
}

さらにexecute関数を使うことで、パラメーターの値を変更してアクションを再実行できます。

const App = () => {
    ...
    const initialArgs = {
        company_name: '株式会社ベースマキナ',
        user_id: 123,
        checked: true,
        created: '2023-01-01',
    }
    const { data, loading, execute } = useExecuteAction("action-id", initialArgs)
 
    const [searchTerm, setSearchTerm] = useState('')
    const handleSearch = (searchTerm) => {
        // 別のパラメータの値でアクションを再実行
        execute({
            ...initialArgs,
            company_name: searchTerm,
        })
    }
 
    return (
        <>
            {loading && <LoadingIndicator />}
            {data && <Table rows={data.results[0].success ?? []}/>}
            <input
                type="text"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
            />
            <button onClick={() => handleSearch(searchTerm)}>検索</button>
        </>
    )
}

詳細なインターフェース

引数

引数名型説明例
actionIdstring実行するアクションのID、または識別子。c3hc2ii23akg0sokf9j0, get-user
argsobjectアクションを実行するための引数で、 キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。{ username: 'JohnDoe' }

なおパラメータの種類ごとにargsのプロパティの値に渡せる値の型は以下です。

種類型説明例
テキストstring | null | undefinednullやundefinedの場合は未入力として扱われます。{ company_name: '株式会社ベースマキナ' }
数値number | null | undefinednullやundefinedの場合は未入力として扱われます。{ user_id: 123 }
日付Date | string | number | null | undefinedstringはDate型に変換できる値、numberはUnixTimestamp (秒)を入力してください。nullやundefinedの場合は未入力として扱われます。{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }
ファイルFile | null | undefinednullやundefinedの場合は未入力として扱われます。{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }
真偽値boolean | null | undefinednullやundefinedの場合はfalseとして扱われます。{ checked: true }
JSON値string | number | Date | null | undefinedJSON値の種類ごとに型が異なります。
テキストならstring | null | undefined、数値ならnumber | null | undefined、日付ならstring | number | Date | null | undefinedを渡せます。
日付の場合stringはDate型に変換できる値、numberはUnixTimestamp (秒)を入力してください。nullやundefinedの場合はnullとして扱われます。		{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }
SQLstring | null | undefinednullやundefinedの場合は未入力として扱われます。{ query: 'SELECT * FROM users;' }
システム値string | null | undefinednullやundefinedの場合は未入力として扱われます。{ offset: '20' }
配列Array | null | undefined各要素の種類の型は、各種類の型と同じです。nullやundefinedの場合は空配列として扱われます。{ user_ids: [10, 11, 12] }
タプルArray各要素の種類の型は、各種類の型と同じです。{ id_and_name: [123, 'taro'] }

戻り値

プロパティ名型説明例
loadingbooleanアクションが現在実行中かどうかを示すブール値。true
dataobject | undefinedアクションの実行結果。このオブジェクトはresultsという名前の配列を持っておりsuccess と failure のプロパティが含まれます。なお、アクションの実行が完了するまではundefinedとなります。{"results":[{"success":[{"id":1,"name":"山田太郎"}]}]}
errorobjectアクションの実行中に発生したエラー。-
executeasync function引数としてアクションのパラメータを受け取り、アクションを実行する関数。dataをプロパティに持つオブジェクトのPromiseを返します。-

なおexecute関数の引数のパラメータは、キーがパラメータ名、値がパラメータに渡す値のオブジェクト（例：{ username: 'JohnDoe' }）となり、パラメータの種類ごとにプロパティの値に渡せる値の型は以下です。

種類型説明例
テキストstring | null | undefinednullやundefinedの場合は未入力として扱われます。{ company_name: '株式会社ベースマキナ' }
数値number | null | undefinednullやundefinedの場合は未入力として扱われます。{ user_id: 123 }
日付Date | string | number | null | undefinedstringはDate型に変換できる値、numberはUnixTimestamp (秒)を入力してください。nullやundefinedの場合は未入力として扱われます。{ created: '2023-01-01', updated: new Date(), deleted: 1609459200 }
ファイルFile | null | undefinednullやundefinedの場合は未入力として扱われます。{ upload_text: new File(['test'], 'test.txt', { type: 'text/plain' }) }
真偽値boolean | null | undefinednullやundefinedの場合はfalseとして扱われます。{ checked: true }
JSON値string | number | Date | null | undefinedJSON値の種類ごとに型が異なります。
テキストならstring | null | undefined、数値ならnumber | null | undefined、日付ならstring | number | Date | null | undefinedを渡せます。
日付の場合stringはDate型に変換できる値、numberはUnixTimestamp (秒)を入力してください。nullやundefinedの場合はnullとして扱われます。		{ company_name: '株式会社ベースマキナ', user_id: 123, created: '2023-01-01', deleted: null }
SQLstring | null | undefinednullやundefinedの場合は未入力として扱われます。{ query: 'SELECT * FROM users;' }
システム値string | null | undefinednullやundefinedの場合は未入力として扱われます。{ offset: '20' }
配列Array | null | undefined各要素の種類の型は、各種類の型と同じです。nullやundefinedの場合は空配列として扱われます。{ user_ids: [10, 11, 12] }
タプルArray各要素の種類の型は、各種類の型と同じです。{ id_and_name: [123, 'taro'] }
AvataruseExecuteActionLazy