Hooks

Hooks are used to interact with entities provided by the Javascript SDK from React components without dealing with the complexity of async operations and state management.

Hooks for individual entities

Hooks for individual entities are used to fetch and manage data for a single workspace element such as Flow or Field Mapping.

They have the following structure:

useFlow(selector: FlowSelector): {
    flow: undefined | Flow;
    apply: ((integrationKeys: string[]) => Promise<Flow[]>);
    reset: (() => Promise<Flow>);
    refresh: (() => Promise<Element>);
    accessor: undefined | FlowAccessor;
    loading: boolean;
    saving: boolean;
    error: any;
    refreshing: boolean;
    create: ((data: CreateFlowRequest) => Promise<undefined | Flow>);
    patch: ((data: Partial<UpdateFlowRequest>) => Promise<void>);
    put: ((data: UpdateFlowRequest) => Promise<void>);
    archive: (() => Promise<void>);
}

Here is what each part of it means:

`selector`	String or object that uniquely identifies the entity. It can be the entity's ID or a combination of entity key and connection selector.
`flow`	Current state of the entity
`apply`	Applies universal entity to selected integrations
`reset`	Resets entity to its initial state (only works for entities that have parents)
`refresh`	Refresh entity data from the server
`accessor`	SDK-provided object for working with the entity.
`loading`	Whether initial data is being loaded
`saving`	Whether entity is being saved to the server
`error`	Error that occurred during last operation
`refreshing`	Whether entity is being refreshed from server
`create`	Create new entity
`patch`	Partially update entity
`put`	Fully update entity (replace all its properties with provided ones)
`archive`	Archive (soft delete) entity

Hooks for lists

Hooks for fetching lists of entities look like this:

useFlows(query?): {
    items: Flow[];
    refresh: (() => Promise<void>);
    refreshing: boolean;
    loadMore: (() => Promise<void>);
    loadingMore: boolean;
    loading: boolean;
    error: any;
}

Here is what each part of it means:

`query`	Query for fetching / filtering the list of entities
`items`	Current list of entities (including all the loaded pages)
`loadMore`	Load the next page of entities from the server (if there is no more pages - nothing will happen)
`loadingMore`	Whether more entities are being loaded from the server
`refresh`	Refresh the list of entities from the server (if multiple pages were fetched previously - only the first page will remain after the refresh)
`loading`	Whether the list is being loaded from the server
`error`	Error that occurred during the last operation

List of hooks

You can find the full list of hooks and their signatures in the React Library Reference