How to Prefetch data on Mouseover in Livewire – Laravel 9

In Livewire you can prefetch the data from the database before the user click on the HTML element. Data will show instantly on click if it is already loaded.

For this, you have to add prefetch modifier to the event.

In this tutorial, I show how you can preload content when the mouse over on an element in the Livewire component in Laravel 9 project.

---

Contents

1. Add Database configuration
2. Create a Table
3. Create Model
4. Create Controller
5. Create Route
6. Create Livewire Component
7. Create View
8. Output
9. Conclusion

---

1. Add Database configuration

Open .env file to update the database connection.

Specify the host, database name, username, and password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

---

2. Create a Table

• Create a table employees using migration.

php artisan make:migration create_employees_table

• Now, navigate to database/migrations/ folder from the project root.
• Find a PHP file that ends with create_employees_table and open it.
• Define the table structure in the up() method.

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('emp_name',60);
        $table->string('email',80);
        $table->string('city',100);
        $table->timestamps();
    });
}

• Run the migration –

php artisan migrate

• The table is been created and I added some records to it.

---

3. Create Model

• Create Employees Model –

php artisan make:model Employees

• Open app/Models/Employees.php file.
• Specify mass assignable Model attributes – emp_name, email, and city using the $fillable property.

Completed Code

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
     use HasFactory;

     protected $fillable = [ 
         'emp_name','email','city'
     ];
}

---

4. Create Controller

• Create EmployeesController controller.

php artisan make:controller EmployeesController

• Open app\Http\Controllers\EmployeesController.php file.
• Create 1 method –
  • index() – Load index view.

Completed Code

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EmployeesController extends Controller
{
    public function index(){
        return view('index');
    }
}

---

5. Create Route

• Open routes/web.php file.
• Define 1 route –
  • / – Load index view.

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\EmployeesController;

Route::get('/', [EmployeesController::class, 'index']);

---

6. Create Livewire Component

• Create emp-component component –

php artisan make:livewire emp-component

This will create 2 files –

• app/Http/Livewire/EmpComponent.php
• resources/views/livewire/emp-component.blade.php

---

app/Http/Livewire/EmpComponent.php

Loop on $employees if records exist. Create a button where add wire:click.prefetch that calls getEmployeeDetails(). In the method pass employee id.

Display employee details if $empDetail is not empty.

Completed Code

<div>

     <div class="container">
          <div class="row mt-5">

               <div class="col-md-12">

                    @if ($employees->count())
                         @foreach($employees as $employee)
                               <input type="button" 
                                      value="View {{ $employee->emp_name }} Info" 
                                      wire:click.prefetch="getEmployeeDetails({{ $employee->id }})" 
                               >
                         @endforeach
                    @endif

                    <br><br>
                    <p><b>Employee Detail</b></p>
                    @if(count($empDetail))
                         <div>
                              <p>Name : {{ $empDetail['emp_name'] }}</p>
                              <p>Email : {{ $empDetail['email'] }}</p>
                              <p>City : {{ $empDetail['city'] }}</p>
                         </div>
                    @endif
               </div>
          </div>
     </div>
</div>

---

resources/views/livewire/emp-component.blade.php

• Include Employees Model.
• Create 1 class variable –
  • $empDetail – Store employee details.

Methods –

• getEmployeeDetails() – It calls when the mouse moves over the button. It takes employee id as a parameter.

Fetch a record from the employees table where $empid is in id field. Read values and assign them to the $this->empDetail.

• render() – Fetch all records from the employees table. Load component view and pass $employees.

Completed Code

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Employees;

class EmpComponent extends Component
{
      public $empDetail = array();

      public function getEmployeeDetails($empid=0){
           $employee = Employees::select('*')->where('id',$empid)->first();

           $empDetail['emp_name'] = $employee->emp_name;
           $empDetail['email'] = $employee->email;
           $empDetail['city'] = $employee->city;

           $this->empDetail = $empDetail;
      }

      public function render()
      {
           $employees = Employees::select('*')->get();

           return view('livewire.emp-component', [
                'employees' => $employees
           ]);

      }
}

---

7. Create View

Create index.blade.php file in resources/views/ folder.

Include @livewireStyles in <head> section. Add <livewire:emp-component /> component and include @livewireScripts.

Completed Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Prefetch data on Mouseover in Livewire - Laravel 9</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" >
    @livewireStyles
</head>
<body>

    <livewire:emp-component />

    @livewireScripts

</body>
</html>

---

8. Output

View Output

---

9. Conclusion

Use the prefetch modifier to fetch records from the database or do some logical operation before clicking.

Not use this modifier to do SESSION or database manipulation. If you want then test it before applying it to production.

If you found this tutorial helpful then don't forget to share.