Back to Consul

DataLoader

ui/packages/consul-ui/app/components/data-loader/README.mdx

1.22.72.4 KB
Original Source

DataLoader

<DataLoader /> works similarly to, and uses, <DataSource /> but additionally exposes various common states based on the status of the loading of the data. These states are exposed as slots to enable you to easily render different elements based on the state of the data.

Use the @dataSource decorator in your repositories to define URI to async method mapping.

javascript
class SomethingRepository extends Service {
  @dataSource('/:partition/:nspace/:dc/services')
  async youCouldCallItAnythingTodoWithGettingServices(params) {
    console.log(params);
    // {partition: "partition", nspace: "nspace", dc: "dc"}
    return getTheThing(params);
  }
}
hbs
<DataLoader
  @src="/partition/nspace/dc/services"
as |loader|>
  <BlockSlot @name="loading">
    Loading...
  </BlockSlot>
  <BlockSlot @name="error">
    Error {{loader.error.status}}
  </BlockSlot>
  <BlockSlot @name="disconnected">
    Whilst we could load the initial data, something happened subsequently that
    meant we could load longer load updates to the data.
  </BlockSlot>
  <BlockSlot @name="loaded">
    {{#each loader.data as |service|}}
    {{service.Name}}

    {{/each}}
  </BlockSlot>
</DataLoader>

Attributes

ArgumentTypeDefaultDescription
srcStringThe source to subscribe to updates to, this should map to a string based URI

Exported API

NameTypeDescription
dataobjectThe loaded dataset once any data has been loaded successfully
errorErrorThe error thrown if an error is encountered whilst loading data
invalidatefunctionInvalidate the data represented by the DataLoader, therefore forcing a re-request of data for the DataLoader

Slots

NameDescription
loadingRendered whilst waiting for the initial data to load.
errorIf there is an error only whilst waiting for the initial data to load, this slot is rendered.
disconnectedRendered when the initial data has already loaded, but a subsequent set of loaded data causes an error to be thrown.
loadedRendered once the initial data is loaded and on subsequent successful loads of data.

See