useProtrakMultiApi

Reference

A hook for running multiple Protrak API calls in parallel and accessing their combined states. Use when your widget needs data from more than one endpoint at the same time.

const { protrakUtils } = React.useContext(customWidgetContext);
const { useProtrakMultiApi } = protrakUtils;

Signature

const results = useProtrakMultiApi([
  { requestConfig: apiCall1, ...args1 },
  { requestConfig: apiCall2, ...args2 },
  // ...
]);

Parameters

An array of request descriptor objects. Each object follows the same shape as the first parameter of useProtrakApi:

Field	Type	Description
requestConfig	function	Function returning { endpoint, config }. Called with the rest of the descriptor as args.
promiseFn	function	Alternative to requestConfig for custom async logic.
...args	any	Extra key-value pairs passed to requestConfig / promiseFn.

Returns

An array of state objects, one per request, in the same order as the input array:

results[0].state; // { isLoading, isError, isFulfilled, data }
results[1].state;
// ...

Each state has the same shape as the state returned by useProtrakApi.

---

Usage Example

function ProjectOverviewWidget(pageContext) {
  const { protrakUtils, protrakComponents } =
    React.useContext(customWidgetContext);
  const { useProtrakMultiApi } = protrakUtils;
  const { Box, H2, H3, Text, Spinner } = protrakComponents;

  const { instanceId, instanceType } = pageContext;

  const [tasksResult, docsResult] = useProtrakMultiApi([
    { requestConfig: getRelatedTasks, instanceId },
    { requestConfig: getRelatedDocs, instanceId },
  ]);

  const isLoading = tasksResult.state.isLoading || docsResult.state.isLoading;
  if (isLoading) return <Spinner />;

  const taskCount = tasksResult.state.data?.totalCount ?? 0;
  const docCount = docsResult.state.data?.totalCount ?? 0;

  return (
    <Box style={{ display: 'flex', gap: '2rem', padding: '1rem' }}>
      <Box style={{ textAlign: 'center' }}>
        <H2>{taskCount}</H2>
        <H3>Tasks</H3>
      </Box>
      <Box style={{ textAlign: 'center' }}>
        <H2>{docCount}</H2>
        <H3>Documents</H3>
      </Box>
    </Box>
  );
}

// Define OUTSIDE the widget function
const getRelatedTasks = ({ instanceId }) => ({
  endpoint: `instances/${instanceId}/relatedInstances`,
  config: { method: 'GET', params: { typeName: 'Task', skip: 0, take: 1 } },
});

const getRelatedDocs = ({ instanceId }) => ({
  endpoint: `instances/${instanceId}/relatedInstances`,
  config: { method: 'GET', params: { typeName: 'Document', skip: 0, take: 1 } },
});

Caveats

• Always define requestConfig / promiseFn functions outside the widget function.
• All requests run in parallel on mount. There is no built-in defer option; use useProtrakApi with defer: true for on-demand calls.