Enhancing Asynchronous Data Fetching in Umbraco v14 with Lit Async Directives

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:

${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:

npm install -S lit

Creating an Async Directive

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

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!