Fetching data using Alpine is hard and non-intuitive

[hankhank10]

I have developed a plugin for Alpine called alpine-fetch which makes it more intuitive to undertake HTTP requests using Alpine.

Would you consider adding functionality like this to the base alpine? If so, I would be very happy to open a pull request but wanted to check whether you see this as a value-added feature before doing that.

What is the issue?

HTMX is a popular library because it makes it really, really straightforward to send a request to and endpoint and populate a DOM element with the result. It is gaining a lot of traction from backend developers who want a straightforward way to add interactive elements without diving too much into Javascript, promises, etc.

I think Alpine is superior and more flexible than HTMX, but that adding functionality to streamline the process of making requests more straightforward.

Making requests with Alpine today

It's quite hard work and verbose:

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

(I'm aware this is a Javascript issue, not an Alpine issue)

Making requests with alpine-fetch

Much more intuitive as it abstracts away all of the promises and asyncs and other stuff that stump new JS devs.

Fetch some text and put it into a span:

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

or fetch some JSON and put a particular element into a span:

<div x-data>
    <span x-text="await $fetchjson('https://weathermockapi.herokuapp.com/some_json', jsonItem='weather')"></span>
</div>

or load it into a x-data and use it wherever you want:

<div x-data="{ hello_world: await $fetch('https://weathermockapi.herokuapp.com/hello_world' }">
    <span x-text="hello_world"></span>
    <span x-text="hello_world"></span>
</div>

Links

More examples: https://hankhank10.github.io/alpine-fetch/
Source: https://github.com/hankhank10/alpine-fetch

[stepanjakl]

Hi @hankhank10,

I quickly tested your library.

I have a few notions:

1. It may look better if the syntax could be without the await operator, like so: <span x-text="$fetch('/endpoint)"></span>
2. I wanted to use the $fetchjson directive, but my response is a simple array, which means that I cannot target it with jsonItem parameter.

In any case, I think the $fetch directive would be a great addition to the official Alpine's magics or plugins set.

[SimoTod]

Because fetch is a promise, you must use await if you need the value directly in a directive. There is nothing you can do.
However, because is a promise, you can use the then syntax in x-init like i the other repo too

[hankhank10]

Thanks for the example @stepanjakl. I had looked at @SimoTod's library but found the syntax in that one of $fetch(url).then(data => ) to be less intuitive that putting in an await at the front.

(At least for me as someone whose primary language isn't JS - others may have different views of course)

[SimoTod]

In reality, you could get rid of await if you really want but your implementation must return a temporary default value (empty string? Null? Undefined?).

For the json implementation, I think you should just return the decoded response, and let the user navigate it without assuming they want a property of an object. They might even assign the full object to a variable

[hankhank10]

For the JSON implementation, the user can just use $fetch if they want to get the whole json string.

For example x-html="await $fetch('https://weathermockapi.herokuapp.com/some_json')" returns the raw json. I just added the $fetchjson option to make it easier if people want to pull out one item.

What I would ideally like to do with respect to json is allow the user to pull the json once and then easily select the item they want. So for instance you could do:

<div x-data="{ jsonObject = await $fetch('url') }"
  <span x-text="jsonObject.name">
  <span x-text="jsonObject.age">
</div>

but I haven't been able to get that working

[SimoTod]

You could trust the server. If the content type is application/json you use JSON.parse and return an object/array, otherwise you return the raw response.

[hankhank10]

I have opened a PR for this: #3086