DEV Community

Matt Brailsford
Matt Brailsford

Posted on • Edited on • Originally published at mattbrailsford.dev

1

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>
)}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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!

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay