CloudBeaver Documentation

DOWNLOAD pdf

Resource Loading

We are using React Suspense for data loading. (It's part of Concurrent Mode)

export const ExtendedDDLViewerTabPanel: NavNodeTransformViewComponent = observer(function ExtendedDDLViewerTabPanel({
  nodeId, folderId
}) {
  const extendedDDLResource = useResource(ExtendedDDLViewerTabPanel, ExtendedDDLResource, nodeId);
  const connectionDialectResource = useResource(ExtendedDDLViewerTabPanel, ConnectionDialectResource, connectionParam);

  return styled(style)(
    <wrapper>
      <SQLCodeEditorLoader
        bindings={{
          autoCursor: false,
        }}
        value={extendedDDLResource.data}
        dialect={connectionDialectResource.data}
        readonly
      />
      <MenuBar menu={menu} style={MENU_BAR_DEFAULT_STYLES} />
    </wrapper>
  );
});
  1. We are loading resources with useResource
  2. when we access extendedDDLResource.data and connectionDialectResource.data it triggers suspense API
  3. <Loader suspense> used in TabPanel will display loading states

How it works:
useResource will load data and track resource outdating. It's returning state with data and isLoading, isLoaded, isOutdated, tryGetData
tryGetData is equivalent to data but it will not trigger suspense API and can be used to track loading states manually
The closest Loader will display states of loading.

useResource(component, resource, key)

component - can be React Component, React Functional Component, or React Hook
resource - resource instance or class
key - null (skip resource loading) or any other valid value

useResource.data

Returns undefined or loaded data (observable, suspense)

useResource.tryGetData

Returns undefined or loaded data (observable). Accessing this method will not trigger React Suspense.

useResource.exception: Error | Error[] | null

useResource..isLoading()

Returns true when the resource is in the progress of loading data.

useResource.isOutdated()

Returns true when the resource is outdated.

useResource.isLoaded()

Returns true when data is loaded and can be accessed via .data or .tryGetData. New data can be in the progress of loading or be outdated at the same time.

useResource.isError()

Returns true when an error occurred when loading.

Did we resolve your issue?