useFetchData

This hook uses only the data handler of the data object to load data without updating the data object state. This can be useful if you want to make a lookup use the same data object that is used to render data.

Example

import { useFetchData } from "@olenbetong/appframe-react";

function MyComponent({ domain, editedRecord }) {
let { loading, refresh, refreshRows, data } = useFetchData(
dsMyDataObject,
domain ? `[Domain] = '${domain}'` : false,
);

return (
<>
{loading && <CircularProgress />}
<Button onClick={refresh}>Update select options</Button>
<select>
{data.map((record) => (
<option key={record.PrimKey} value={record.CustomerID}>
{record.CustomerName}
</option>
))}
</select>
<Button onClick={() => refreshRows(`[PrimKey] = '${editedRecord.PrimKey}'`)}>
Refresh edited record
</Button>
</>
);
}

API

export declare function useFetchData<T>(
  dataObject: DataObject<T>,
  filter: false | Filter | string
): {
  data: T[];
  /**
   * Forces a refresh of the data, even if the filter has not changed.
   */
  refresh: () => void;
  /**
   * Fetches data mathing the given filter. Instead of replacing the data in the
   * state of the hook, it will attempt to match the fetched records with the existing
   * records, and only update the updated records. Any other records will remain
   * unchanged, and will still be returned from the hook.
   *
   * This can be used to update rows that have been edited with a filter like
   * `[PrimKey] = 'primkey of an updated record'`.
   *
   * @param filter Filter to use when fetching data
   * @param idField Field that should be used to match records with the existing data
   */
  refreshRows: (filter: any, idField?: keyof T) => void;
  /**
   * A boolean indicating if the data is currently being loaded.
   * @deprecated Use loading instead
   */
  isLoading: boolean;
  /**
   * A boolean indicating if the data is currently being loaded.
   */
  loading: boolean;
};