How to Fetch Data from a Database in Laravel with Livewire: A Step-by-Step Guide

If you’re a Laravel developer, you know how crucial it is to fetch data from a database efficiently and effectively. With Livewire, a popular PHP framework, you can create dynamic web applications that interact with your database in real-time. In this article, we’ll show you how to fetch data from a database in Laravel using Livewire, covering the basics, best practices, and advanced techniques. So, buckle up and let’s dive in!

What is Livewire?

Livewire is a PHP framework that allows you to build dynamic, interactive web applications using Laravel. It provides a simple, yet powerful way to create real-time interactions without requiring extensive JavaScript knowledge. With Livewire, you can create components that fetch data from your database, manipulate it, and update your UI in real-time.

Prerequisites

Before we begin, make sure you have the following installed:

• Laravel 8.x or higher
• Livewire 2.x or higher
• A database (e.g., MySQL, PostgreSQL, or SQLite)
• A basic understanding of Laravel and Livewire concepts

Step 1: Set up Your Database

In this example, we’ll use a simple Laravel installation with a `posts` table. Create a new Laravel project using the following command:

composer create-project --prefer-dist laravel/laravel project-name

Then, create a new database and update your `.env` file with the database credentials.

Next, create a `posts` table using the following migration:

php artisan make:migration create_posts_table --create=posts

Edit the migration file to add the necessary columns:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('content');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

?

Run the migration to create the table:

php artisan migrate

Step 2: Create a Livewire Component

Create a new Livewire component using the following command:

php artisan make:livewire PostComponent

This will generate a `PostComponent.php` file in the `app/Http/Livewire` directory. Edit the file to add the following code:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class PostComponent extends Component
{
    public $posts;

    public function mount()
    {
        $this->posts = Post::all();
    }

    public function render()
    {
        return view('livewire.post-component');
    }
}

?

In this example, we’re using the `Post` model to fetch all posts from the database. We’ll create the `Post` model in the next step.

Step 3: Create a Livewire View

Create a new view file `post-component.blade.php` in the `resources/views/livewire` directory:

<div>
    <h2>Posts</h2>
    <ul>
        @foreach ($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>

This view will display a list of post titles fetched from the database.

Step 4: Create a Post Model

Create a new model file `Post.php` in the `app/Models` directory:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = ['title', 'content'];
}

?

This model defines the `posts` table and specifies the fillable fields.

Step 5: Fetch Data from the Database

In the `PostComponent.php` file, we used the `Post` model to fetch all posts from the database using the `all()` method. This method returns a collection of posts, which we can then loop through in our view.

Let’s add some sample data to the `posts` table:

php artisan tinker

In the Tinker shell, create some sample posts:

>>> Post::factory()->count(5)->create()

This will create 5 sample posts in the `posts` table.

Step 6: Display the Fetched Data

Finally, let’s display the fetched data in our view. In the `post-component.blade.php` file, we looped through the `$posts` collection and displayed each post title.

Run the following command to serve your application:

php artisan serve

Open your browser and navigate to http://localhost:8000. You should see a list of post titles fetched from the database.

Best Practices and Advanced Techniques

Now that you’ve learned the basics of fetching data from a database in Laravel with Livewire, let’s cover some best practices and advanced techniques:

Use Eloquent Queries

Instead of using the `all()` method, use Eloquent queries to fetch data from the database. This allows you to filter, sort, and paginate your data efficiently.

$posts = Post::where('title', 'LIKE', '% Laravel %')->orderBy('created_at', 'desc')->paginate(10);

Use Livewire’s Built-in Pagination

Livewire provides built-in pagination features. Simply add the `paginate` method to your Eloquent query and use Livewire’s pagination component.

<livewire:pagination :posts="$posts" />

Use Real-time Updates

Livewire allows you to update your UI in real-time using its `wire:poll` directive. Use this to update your data periodically or when a specific event occurs.

<div wire:poll="updatePosts">...

Post::where('title', 'LIKE', '% Laravel %')->INDEX('title_index')->get();

public function mounted()
{
    // Fetch data when the component is mounted
    $this->posts = Post::all();
}

public function updated()
{
    // Update the UI when the data changes
    $this->posts = Post::all();
}