Best way to fetch external API data on button click and show alert using Livewire 3 (no page refresh)

I'm working with Livewire 3 and have a blog list page where each blog post has a button (similar to a "like" button).

Here's what I'm trying to achieve:

When the button is clicked, I want to fetch data from an external API in the Livewire backend component.
Then, I want to send the fetched data back to the frontend (Blade).
Finally, I want to display the data in a JavaScript alert() window—all without a full page refresh.

What is the best practice to implement this pattern using Livewire 3? Should I use events or JavaScript hooks? How can I pass the data from the backend to JS in a clean way?

Thanks in advance for any tips or examples!

Let me know if you want to add code snippets or further context.

vincent15000

1 year ago

Level 63

To do what you want, you need to use websockets.

To fetch data from an external API, you can use the HTTP client.

https://laravel.com/docs/11.x/http-client

To send the datas to the frontend without refreshing the page and do whatever you want with,k you need to use a websocket like Pusher or Reverb and frontend side you need to use a client like Echo.

Please or to participate in this conversation.