Alpine JS Fetch

Alpine JS magic methods wrapper for fetch API methods 📨

Install

$3

``html
defer
src="https://unpkg.com/alpinejs-fetch@latest/dist/api.min.js"
>


`

$3

`shell
yarn add -D alpinejs-fetch

npm install -D alpinejs-fetch
`

`js
import Alpine from 'alpinejs'
import api from 'alpinejs-fetch'

Alpine.plugin(api)

Alpine.start()
`

Example

$3

`html


`html


`html


`html


A lot of the times you only need a property from the response object, this is
usually data. You'll see/write stuff like this:

_Please note, this depends on the API response and not all APIs will share the
same response format._

`js
const { data } = fetch('https://dummyjson.com/products/1')
`

With this package you can do that by adding [data] to the end of the URL.

`html


This works for all the requests and isn't limited to the data property.
Anything that is part of the response object can be used to filter the response.
For example, [status].

_Heads up! Syntax is important, the filter property key must be place in square
brackets [x]._

$3

Sometimes you don't want the whole object back, in this example data returns a
lot of information but we only want title and price back. Here's how you can
do that.

`html

@click="productData = await $get('https://dummyjson.com/products/1[data.title, data.price]')"
>
Get