RawExecute
Run a prepared execution and pass the resulting data view to a render-prop child.
The RawExecute component runs an execution that you have already prepared (IPreparedExecution) and passes the loading state, error, and data view to its children render function. Build the prepared execution yourself, for example with backend.workspace(workspace).execution().forItems([...]); to run a saved visualization, use ExecuteInsight instead.
Basic usage
import { RawExecute, useBackendStrict, useWorkspaceStrict } from "@gooddata/sdk-ui";
import * as Md from "./catalog.js";
export const Example = () => {
const backend = useBackendStrict();
const workspace = useWorkspaceStrict();
const execution = backend.workspace(workspace).execution().forItems([Md.Amount, Md.Product.Name]);
return (
<RawExecute execution={execution}>
{({ isLoading, error, result }) => {
if (isLoading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error.message}</div>;
}
return <pre>{JSON.stringify(result?.dataView.data, null, 2)}</pre>;
}}
</RawExecute>
);
};
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. |
false | DataViewFacade | undefined | The data was loaded. An empty result is returned here, not as a NoDataError. |
false | undefined | GoodDataSdkError | The execution or data read failed. |
reload is available in every state and starts a new execution.
Rendering
RawExecute 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
RawExecutestarts a new execution whenexecution.fingerprint()changes. A prepared execution rebuilt with the same definition on every render does not start a new one.- It also starts a new execution when
windowchanges by deep comparison, or whenonError,onLoadingChanged,onLoadingFinish, oronLoadingStartchanges by reference. Memoize these callbacks. - Calling
reload()starts a new execution at any time. - When a new execution starts before the running one finishes, the running one is canceled. The request itself keeps running unless
enableExecutionCancellingistrue; then its signal is aborted.
Notes
- Set
loadOnMount={false}to skip the initial run, and callreload()to start it, for example after a user action. - Without
window,RawExecutereads all data. Passwindowwithoffsetandsizearrays to read one page of a large result. exportTitledefaults to"RawExecute".
Props
| Prop | Type | Required | Description | Inherited from |
|---|---|---|---|---|
children | (executionResult: WithLoadingResult) => ReactElement | null | Yes | Child component to which rendering is delegated. | — |
execution | IPreparedExecution | Yes | Prepared execution which the executor will drive to completion and will obtain data from. | — |
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. | — |
LoadingComponent | IExecuteLoadingComponent | No | Provide component for rendering of the loading state. | — |
loadOnMount | boolean | No | Indicates whether the executor should trigger execution and loading right after it is mounted. | — |
window | DataViewWindow | No | Specifies whether RawExecute should load all data from backend or just a particular window - specified by offset and size of the window. | — |
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 and render backend data with the Execute component using series, slices, filters, and a render-prop child.
Build custom executions with attributes, measures, filters, sorting, and dimensions via the Analytical Backend fluent API.
Fetch execution data as a DataViewFacade from a prepared execution or inline seriesBy/slicesBy configuration.
Run a saved visualization and pass the resulting data view to a render-prop child.