Execute
Fetch and render backend data with the Execute component using series, slices, filters, and a render-prop child.
The Execute component builds an execution from measures and attributes, runs it, and passes the result to its children render function as data series (built from measures, optionally scoped by attribute elements) sliced by additional attributes. Either seriesBy or slicesBy must contain at least one item.
Basic usage
import { Execute } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";
export const Example = () => (
<Execute
seriesBy={[Md.Amount, Md.Won]}
slicesBy={[Md.Product.Name]}
filters={[]}
>
{({ result, error, isLoading }) => {
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
const data = result?.data();
return <pre>{JSON.stringify(data?.series().toArray(), null, 2)}</pre>;
}}
</Execute>
);
States
The children function receives a WithLoadingResult in one of these states.
isLoading | result | error | When |
|---|---|---|---|
false | undefined | undefined | Before the first load starts: on the first render and, when loadOnMount is false, until you call reload() or a prop change triggers a new execution. |
true | undefined | undefined | The execution is running. If a previous load succeeded, also on the render right after a prop change that triggers a new execution, so children never receives a stale result. |
false | DataViewFacade | undefined | The data was loaded. A no-data result that includes a data view is returned here, not as an error. |
false | undefined | GoodDataSdkError | The execution or data read failed. The error is converted to a GoodDataSdkError subtype. |
reload is available in every state and starts a new execution.
Rendering
Execute picks what to render in this order:
| Condition | Renders |
|---|---|
ErrorComponent is set and there is an error | ErrorComponent with the error prop. |
LoadingComponent is set and isLoading is true | LoadingComponent. |
Both LoadingComponent and ErrorComponent are set and there is no result | Nothing (null). |
| Otherwise | The children function. |
When you set both LoadingComponent and ErrorComponent, children is called only with a successful result.
When it re-runs
Executestarts a new execution when any ofseriesBy,slicesBy,totals,filters,sortBy,window, orworkspacechanges by deep comparison. Placeholders are resolved before the comparison, so a change of a placeholder value also triggers a new execution.- It also starts a new execution when
onError,onLoadingChanged,onLoadingFinish, oronLoadingStartchanges by reference. If you pass inline functions, each render of the parent starts a new execution. - Changing
backendalone does not start a new execution. - Calling
reload()starts a new execution at any time. - When a new execution starts or the component unmounts before the running one finishes, the running one is canceled and
onErroris called with aCancelledSdkError. The request itself keeps running unlessenableExecutionCancellingistrue; then its signal is aborted.
Notes
backendandworkspaceprops take precedence overBackendProviderandWorkspaceProvider. If neither is available,Executedoes not throw during render: the load fails and the error is passed inerrorand toonError.- If both
seriesByandslicesByare empty, the load fails with anUnexpectedSdkError: “In the Execute component, either seriesBy or slicesBy must be defined and must contain at least one item”. seriesBy,slicesBy,totals,filters, andsortBycan contain placeholders. PassplaceholdersResolutionContextfor composed placeholders.- An empty result is not a
NoDataError. Handle the zero-row case inchildren. - After each load,
onExportReadyis called with an export function, or, after a failure, with a function that rejects with the error.exportTitledefaults tocomponentName, which defaults to"Execute".
Props
| Prop | Type | Required | Description | Inherited from |
|---|---|---|---|---|
children | (executionResult: WithLoadingResult) => ReactElement | null | Yes | Child component to which rendering is delegated. | — |
backend | IAnalyticalBackend | No | Backend to execute against. | — |
componentName | string | No | Informative name of the component. | — |
enableExecutionCancelling | boolean | No | Optionally enable real execution cancellation. This means that if the execution request is not yet finished and the execution changes, the request will be cancelled and the new execution will be started. Default: false | — |
ErrorComponent | IExecuteErrorComponent | No | Provide component for rendering of the error state. | — |
exportTitle | string | No | Name to use for files exported from this component. | — |
filters | NullableFiltersOrPlaceholders | No | Filters to apply on server side. | — |
LoadingComponent | IExecuteLoadingComponent | No | Provide component for rendering of the loading state. | — |
loadOnMount | boolean | No | Specifies whether Execute should trigger execution and loading right after it is mounted. | — |
placeholdersResolutionContext | any | No | Resolution context for composed placeholders. | — |
seriesBy | AttributesMeasuresOrPlaceholders | No | Data series will be built using the provided measures that are further scoped for elements of the specified attributes. | — |
slicesBy | AttributesOrPlaceholders | No | Slice all data series by elements of these attributes. | — |
sortBy | SortsOrPlaceholders | No | Sorting to apply on server side. | — |
totals | TotalsOrPlaceholders | No | Include these totals among the data slices. | — |
window | DataViewWindow | No | Specifies whether Execute should load all data from backend or just a particular window - specified by offset and size of the window. | — |
workspace | string | No | Workspace in whose context to perform the execution. | — |
onError | (error: GoodDataSdkError, props: TProps) => void | No | If specified, this function will be called in case loading runs into an error. | IWithLoadingEvents |
onExportReady | (exportFunction: IExportFunction, props: TProps) => void | No | Called when loading finishes and it is possible to export the underlying data. Function that does the export will be provided on the callback. | IWithLoadingEvents |
onLoadingChanged | (isLoading: boolean, props: TProps) => void | No | Called when loading starts and finishes, indicating the current state using the isLoading parameter. | IWithLoadingEvents |
onLoadingFinish | (result: DataViewFacade, props: TProps) => void | No | Called when loading finishes. | IWithLoadingEvents |
onLoadingStart | (props: TProps) => void | No | Called when loading starts. | IWithLoadingEvents |
Related
Fetch execution data as a DataViewFacade from a prepared execution or inline seriesBy/slicesBy configuration.
Run a prepared execution and pass the resulting data view to a render-prop child.
Run a saved visualization and pass the resulting data view to a render-prop child.
Understand the hooks, components, and backend API that feed custom visualizations, and how series, slices, and data points structure the result.
Define execution dimensions, totals, and sorting, then read computed data through execution results, data views, and DataViewFacade.