Alpine Fetch

Introduction

Alpine.JS is a rugged, minimal tool for composing behavior directly in your markup. It can be used, even by those with little experience in Javascript, to add interactivity to web pages.

Alpine Fetch is a magic helper for Alpine.JS which makes it easy to do HTTP requests within markup.

View on GitHub

Native Alpine approach to HTTP requests

One area where Alpine does require you to go outside markup is when making HTTP requests to dynamically populate parts of the page.

Someone looking to make a call on an API endpoint, might need to do something like the following:


<div x-data="{
        result: null,
        async retrieveData() {
            this.result = await (await fetch('/endpoint')).text();
        }
     }"
     x-init="retrieveData()"
>
     <span x-text="result"></span>
</div>

... which is quite verbose, and involves promises which are not straightforward for beginners.

Alpine Fetch approach

Alpine Fetch adds magic functions to abstract a lot of this away and makes it much more straightforward to populate your page via HTTP requests. The above example using Alpine Fetch would be:


<div x-data>
    <span x-text="await $fetch('/endpoint)"></span>
</div>

Alpine Fetch can fetch simple text from the server using the $fetch method or it can fetch and parse JSON using the $fetchjson method.

It supports all HTTP methods such as GET, POST and PUT. It has no dependencies other than Alpine.

Installation

Include the following <script> tag in the <head> of your document, before Alpine:

<script defer src="https://cdn.jsdelivr.net/gh/hankhank10/alpine-fetch@main/alpine-fetch.js"></script>

Usage

At its most basic $fetch accepts a URL and returns the contents of that URL.

Unlike the generic Javascript fetch method which requires dealing with promises, this simply waits for the response to be received and then returns it.

$fetch should be preceded by await to ensure that this happens.

String to x-text

The most basic example is to fetch a string from the server and populate it in your markup via the x-text method of alpine.


<div x-data>
    <span x-text="await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world')"></span>
</div>

This will be replaced

HTML to x-html

The $fetch helper can be used anywhere, so if you don't want to render it as text you can pass it to the x-html method of Alpine - or to a class, or any other part of the markup. It behaves like any other variable.


<div x-data>
    <span x-html="await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world')"></span>
</div>

This will be replaced

Retrieving once, using multiple times

You might want to use the same data in multiple places in your markup. In that case, it would make sense to just fetch it once and use it multiple times. You can do this by retrieving it into the x-data tag like any other variable.


<div x-data="{ hello_world: await $fetch('https://expensive-crow-sarong.cyclic.cloud/hello_world' }">
    <span x-text="hello_world"></span>
    <span x-text="hello_world"></span>
</div>

Retrieving JSON

$fetch retrieves data which it expects to be text, but you can also use $fetchjson to retrieve data which is JSON and then render the relevant part of that into your page.


<div x-data>
    <span x-text="await $fetchjson('https://expensive-crow-sarong.cyclic.cloud/some_json', jsonItem='weather')"></span>
</div>

The weather is

Specifying a method

$fetch and $fetchjson assume that you want to use a GET method but you can specify that you want to send another.


<span x-text="await $fetch('/post_url', method='POST')"></span>
<span x-text="await $fetch('/delete_url', method='DELETE')"></span>

Responding to actions

If you specify a DOM element or a variable to be equal to $fetch or $fetchjson then the methods will automatically fetch on init.

However you can also customise when they do the fetch however you like. In the below example, it will fetch only when the user clicks the button.


<div x-data="{ weather: 'uncertain at this stage' }">

    The weather is <span x-text="weather"></span>

    <button
        x-on:click="weather = await $fetchjson('https://expensive-crow-sarong.cyclic.cloud/some_json', jsonItem='weather')"
    >Click me to change the weather</button>

</div>

The weather is

All of these examples use a simple API with the following endpoints: