In this lesson, we build a little app that fetches dog photos from the dog.ceo API, based on a "breed" search field. We want the API call to happen again when the search value changes, and to do so we use the $watch property from Alpine JS, which lets us define what state property we want to watch, and what callback function to run when a change happens.
We also use the debounce modifier on the x-model property to avoid firing an API call on each keystroke.
<div x-data="dogFetcher()" x-init="init"> <!-- Search field --> <label>What breed?</label> <input type="text" x-model.debounce.750="breed"> <!-- API error --> <template x-if="fetchStatus === ‘error‘"> <p class="error">There was something wrong with the API call, please try again.</p> </template> <!-- Empty search field value --> <p x-show="!breed" class="prompt">Let‘s go fetch some pups!</p> <!-- Fetching dog breed --> <div x-show="fetchStatus === ‘loading‘" class="spinner"></div> <template x-if="breed && fetchStatus === ‘idle‘"> <div> <!-- Failed search --> <template x-if="data.status === ‘error‘"> <p class="error" x-text="data.message"></p> </template> <!-- Puppy pic!! --> <template x-if="data.status === ‘success‘"> <img :src="data.message" alt="cute pup" /> </template> </div> </template> </div> <script> function dogFetcher() { return { breed: ‘corgi‘, fetchStatus: ‘loading‘, data: null, init() { this.$watch(‘breed‘, () => { this.fetchDogs(); }); this.fetchDogs(); }, fetchDogs() { this.fetchStatus = ‘loading‘, fetch(`https://dog.ceo/api/breed/${this.breed}/images/random`) .then(res => { if (!res.ok) { this.fetchStatus = ‘error‘ } return res.json() }) .then(data => { this.fetchStatus = ‘idle‘ this.data = data }) .catch(error => { this.fetchStatus = ‘error‘ console.log({ error }) }) } } } </script>
[Mise] Refetch API data when a state value changes with the `$watch` property in Alpine JS