Search code examples
laravel-livewire

Laravel Livewrie Datatables Timeout when loading model


When I setup a datatable, regardless of the object I use, I end up with it attempting to load and eventually timing out. I'm not even sure how to start debugging this.

I've followed some of the examples here: https://livewire-datatables.com/ and simple data tables like:

<livewire:datatable model="App\User" exclude="planet_id, bio, latitude, longitude, updated_at" />

Work perfectly. The problem I'm having is when I try anything that requires it's own Datatable class.

My steps/code are as follows:

php artisan livewire:make jobs-data-table

jobs-data-table.blade.php

<livewire:jobs-data-table searchable="title" exportable />

JobsDataTable

<?php

namespace App\Http\Livewire;

use \App\Models\Job;
use Livewire\Component;
use Illuminate\Support\Str;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\DB;
use Mediconesystems\LivewireDatatables\Column;
use Mediconesystems\LivewireDatatables\DateColumn;
use Mediconesystems\LivewireDatatables\TimeColumn;
use Mediconesystems\LivewireDatatables\NumberColumn;
use Mediconesystems\LivewireDatatables\BooleanColumn;
use Mediconesystems\LivewireDatatables\Http\Livewire\LivewireDatatable;


class JobsDataTable extends Component
{
    public function builder()
    {
        return
            Job::query()->take(10)->get(2);
    }
}

Then I setup a simple test route:

Route::get('/test', function () {
    return view('/livewire/jobs-data-table');
});

The route works, but ultimately times out, with no error beyond the timeout exception.


Solution

  • You are creating an infinite loop - by making the component render itself over and over.

    Your route calls the view livewire/jobs-data-table.blade.php - and the view calls the JobsDataTable component through <livewire:jobs-data-table ../>. This will return a new instance of the view, livewire/jobs-data-table, which again will initialize the JobsDataTable component and continue with that loop until it times out.

    Normally, when rendering a full-page Livewire component, you would call the class in the route, not the view directly, that way you render the entire component and not only the view - meaning that using render() on any views within the livewire folder is bad practice.

    Route::get('/test', App\Http\Livewire\JobsDataTable::class);
    

    However, doing this will not solve your problem, it wouldn't change anything. You need to render the component once.

    To solve your problem, you need to render the component in such a way that it doesn't call on itself in the view. That means that your livewire/jobs-data-table.blade.php view cannot call <livewire:jobs-data-table ../>. Since there's not much more code to show what its doing, being more explicit on what to change exactly is difficult.