Livewire help

[sevenpixels]

I'm trying to get this working inside Livewire but can't seem to get it to update after an input is typed into. As I type, I can see the url parameter updating. in the reports() method I am able to see the new filter. But the new filter is never applied to the query. If I do a hard refresh on the page, it picks up the filter parameter and returns the results I expect. It just doesn't happen in an AJAX call.

The problem is the AJAX call goes to /livewire/update and there are no parameters on it. But the hard refresh does.

class Reports extends Component
{
    use WithPagination;
    
    /** @var array<string,string> */
    #[Url(history: true, except: '')]
    public $filter = [];

    /**
     * Render the component.
     */
    #[Layout('components.layouts.app')]
    public function render()
    {
        return view('livewire.registered.reports');
    }

    #[Computed]
    public function reports()
    {
        return QueryBuilder::for(Report::class)
            ->with(['site'])
            ->withCount('items')
            ->allowedIncludes(['site'])
            ->allowedFilters([
                AllowedFilter::custom('report', new FiltersReports())
            ])
            ->where('team_id', Auth::user()->currentTeam->id)
            ->paginate(25);
    }
}

<flux:input placeholder="Search..." icon="magnifying-glass" class="w-2xs!" wire:model.live.debounce.300ms="filter.report" />```

[OpShaid]

Use a separate public property for the filter key:
#[Url(history: true, except: '')]
public $filterReport = ''; // single property

public function updatedFilterReport()
{
$this->resetPage(); // optional: reset pagination when filter changes
}

Update your component to use this instead of nested arrays:

<flux:input placeholder="Search..." icon="magnifying-glass" class="w-2xs!"
wire:model.live.debounce.300ms="filterReport" />

And in your computed property:

#[Computed]
public function reports()
{
return QueryBuilder::for(Report::class)
->with(['site'])
->withCount('items')
->allowedIncludes(['site'])
->allowedFilters([
AllowedFilter::custom('report', new FiltersReports($this->filterReport))
])
->where('team_id', Auth::user()->currentTeam->id)
->paginate(25);
}

If you want to keep it as a nested array:

Livewire 3 requires deep reactivity tracking with $this->filter['report']. But #[Url()] doesn’t automatically handle nested keys well in AJAX. You can fix it by adding:

protected $updatesQueryString = ['filter.report'];

And make sure your input matches:

<flux:input wire:model.live.debounce.300ms="filter.report" />

Also, reset pagination on filter changes:

public function updatedFilterReport()
{
$this->resetPage();
}

[sevenpixels]

Thanks. So I went with the first option of individual property for each filter/value. Figure this might be easier to add a bunch of different properties. I changed everything but I still don't see the change in the query.

I use Ray and dump the value and property inside my custom filter in the invoke and I don't see it called ever. I can dump the value of the custom property at the top of my computed property so I know it's there.

I'm guessing because it doesn't see filter[report] it doesn't pick up the custom filter? I also tried the nested array as well but get the same result as my first issue. Typing doesn't fire the filter, but a hard refresh does. Even though I can see filter[report] in the URL. I tried passing $this->filter['report'] in my custom filter. This one and the single version like you suggested first I think still come down to the package not seeing the filter in the URL on the AJAX request /livewire/update and thus not passing it through.

class FiltersReports implements Filter
{
    public function __invoke(Builder $query, $value, string $property)
    {
        $query->where(function ($query) use ($value) {
            $query->whereLike('memo', "%{$value}%")
                ->orWhereHas('site', function ($query) use ($value) {
                    $query->where('name', 'like', "%{$value}%");
            });
        });
    }
}

{
    use WithPagination;

    protected $updatesQueryString = [
        'filter.report' => ['except' => '']
    ];

    /** @var string */
    #[Url(history: true, except: '')]
    public $filter = [];

    /**
     * Render the component.
     */
    #[Layout('components.layouts.app')]
    public function render()
    {
        return view('livewire.registered.reports');
    }

    #[Computed]
    public function reports()
    {
        return QueryBuilder::for(Report::class)
            ->with(['site'])
            ->withCount('items')
            ->allowedIncludes(['site'])
            ->allowedFilters([
                AllowedFilter::custom('report', new FiltersReports($this->filter['report'])),
            ])
            ->where('team_id', Auth::user()->currentTeam->id)
            ->paginate(25);
    }

    public function updated($property)
    {
        if (str($property)->startsWith('filter.')) {
            $this->resetPage();
        }
    }
}

You can see in the first request it's the AJAX update, there are no query parameters so the table has no filter applied. Even though it has ?filter[report]=parent in the browser URL. Then I hard refresh and you see the 2nd request where it has the parameter and the table gets filtered as expected.

[sevenpixels]

https://github.com/spatie/laravel-query-builder/blob/main/src/Concerns/FiltersQuery.php#L67

If I dump $this->request I can see it doesn't have the parameters. So the request appears to have no parameters. So when it tries to grab the filters that are allowed, it doesn't because there are none in that request. I've tried to apply the filter to the request in my updated method.

$this->request()->query->set('filter', $this->filter);

[OpShaid]

Put this line at the very top of your reports() computed property, before QueryBuilder::for(...):

request()->merge([
'filter' => $this->filter,
]);

That’s it.
This forces the current Livewire filter state into Laravel’s request() object so Spatie’s internals can read it just like it would from a normal GET request.

If you want to make it resilient (and avoid empty filters polluting the request):

request()->merge([
'filter' => array_filter($this->filter),
]);

Then your custom filter will finally fire during AJAX updates without needing a full page refresh.

[sevenpixels]

That worked. Thanks!!!!

[sevenpixels]

All that works, except the parameter never clears when it's empty. I've tried both of these. The first one looks like the current way to do it and the 2nd one looks like it's deprecated.

protected $queryString = [
    'filter[report]' => ['except' => '']
];

protected $updatesQueryString = [
    'filter.report' => ['except' => '']
];

Because of this it still see's the parameter and does a like '%%' query instead of omitting the filter.

[sevenpixels]

Resolved by adding this to my updated() method.

    public function updated($property)
    {
        if (str($property)->startsWith('filter.')) {
            $this->filter = array_filter($this->filter, fn($value) => !empty($value) || is_numeric($value));
            
            $this->resetPage();
        }
    }