Svelte

Svelte is a tool for building web applications. Like other user interface frameworks, it allows you to build your app declaratively out of components that combine markup, styles and behaviours. These components are compiled into small, efficient JavaScript modules that eliminate overhead traditionally associated with UI frameworks.

Fetching data in a lifecycle hook

In a client-side Svelte component, data fetching often happens within a lifecycle hook. In the example below, we fetch data from Drupal within the onMount hook, and update the value of the articles variable with the response. The data will then be available for rendering in the template.

Umami Articles

Loading...

<script>
  import { onMount } from 'svelte';
  import { JsonApiClient } from "@drupal-api-client/json-api-client";

  let articles;

  onMount(async () => {
    const client = new JsonApiClient(
      "https://drupal-api-demo.party",
    );
    articles = await client.getCollection("node--article");
  });
</script>

<h1>Umami Articles</h1>
{#if articles}
  <ul>
    {#each articles.data as article}
      <li>{article.attributes.title}</li>
    {/each}
  </ul>
{:else}
  <p>Loading...</p>
{/if}

Additional Resources

• Svelte.dev
• Svelte Lifecycle Hooks