Enhancing Asynchronous Data Fetching in Umbraco v14 with Lit Async Directives
Tags: javascript, lit, umbraco, async
Published: 2024-04-25 08:00:00

In Umbraco Commerce we have a number of interconnected models which pose a bit of a problem when it comes to rendering them for display in our markup for the new backoffice.

Fetching all of these models whenever just one of them is requested would be pretty wasteful. Instead, it would be great if the UI could easily request these connected models whenever it needed them. 

This is where we can leverage Lit's async directives to do just that.

## The Power of Lit Async Directives

Lit async directives provide a powerful way to manage asynchronous operations within your Lit templates. They allow you to create helper functions that fetch data and pass it to a HTML template once it's loaded. 

Here's an example of such a helper used in Umbraco Commerce:

```javascript
${withUcPaymentMethod(this, this.order.paymentInfo.paymentMethod.id, (paymentMethod) =>
    <div>
        <div>Payment via ${ paymentMethod.name }<div>
        <div>${this.order.paymentInfo.totalPrice.formatted}<div>
    </div>
)}
```

In this example, `withUcPaymentMethod` is an async directive. It fetches a payment method based on its ID, and once the data is loaded, it passes it to a template that renders the payment information.

## Setting Up Lit

To use Lit async directives, you need to have a dependency on `lit`. Note that the version of `lit` exported by Umbraco doesn't contain the directive classes, so you'll need to install it separately:

```bash
npm install -S lit
```

## Creating an Async Directive

Now, let's take a look at how we can create our own async directive:

```javascript
import { AsyncDirective } from 'lit/async-directive.js';
import { noChange } from '@umbraco-cms/backoffice/external/lit';
import { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';

class WithUcPaymentMethodDirective extends AsyncDirective {

    render(host: UmbControllerHost, id: string, template:(model:any) => unknown)
    {
        new UcPaymentMethodRepository(host).get(id).then(resp => {
            this.setValue(template(resp.data));
        });

        return noChange;
    }
}

export const withUcPaymentMethod = directive(WithUcPaymentMethodDirective);
```

In this code, we define a new async directive called `WithUcPaymentMethodDirective`. This directive fetches a payment method based on its ID, and once the data is loaded, it calls `this.setValue` to update the template with the fetched data.

## Handling Initial Render and Re-render

When the directive initially renders, it returns `noChange`. This means that the template won't be updated until the data is loaded. Once the fetch request promise resolves, `this.setValue` is called, passing in the rendered template which is in turn passed the returned model. This call triggers a re-render for this module with the updated content.

## Caching Data

It's important to note that your repository should implement some kind of caching layer to ensure you aren't making a lot of requests. This will help improve the performance of your application and provide a better user experience.

In conclusion, Lit async directives provide a powerful and flexible way to manage asynchronous data fetching in your Lit applications. They allow you to keep your templates clean and easy to understand, while also ensuring that your data is loaded efficiently and effectively. Happy coding!