404 on model deletion

[bjhfransen]

Creating and updating modals are working fine, but when I have a modal that asks for a confirmation to delete a given model I get a 404 and all modals are broken (all showing 404). I feel it's somewhere in the rehydration mechanics of the package. Tried to look into it and see if I could invoke the destroyComponent method and populate it with the activeComponent property. But to no avail. Went down in the inner workings of Livewire, events and hydration - but while I've learned a thing or two I din't find an answer there. I tried to comment of portions of logic, but also not the solution. Currently I'm down 8 hours trying to find clues in the inner workings of the package, but I ran out of ideas to tackle it. Thought it might be an issue.

Logic:

• User clicks delete button on a card (that's inside a livewire component) (overview component that holds all card components)
• Confirmation modal pops up, showing descriptive info about the item to be deleted (and I feel this is where the issue lies: later on this model containing the info is removed from the database and somewhere a findOrFail/or alike happens)
• User clicks, Yes, delete button. Triggers the delete() method on the component
• Some validation happens, if all is OK it emits an event to the parent component to delete a card component. After emitting the dialog is closed (assuming all following logic will happen)
• Event is fetched by the parent, deletes the actual item from the database
• Parent emits an event to rerender itself

Issue:

• Upon rerendering the 404 is shown. I've tested up and above, left and right. But I got the idea that somehow there's a reference to the item deleted in a cache and it can't find that.

Solution:

• Have a way to destroy such a reference?

Image of confirmation modal

Image of the 404 happening (this happens to all elements that can call a modal; in my case for creating a new character, updating an existing one from the overview with cards, or deleting another one from the overview with cards)

From DeleteCharacter (modal)

public function delete()
    {
        if (!$this->authorized()) {
            abort(403);
        }

        $this->dispatch('characters-overview.delete', character: $this->character);

        $this->closeModal();
    }

From CharactersOverview (parent component, holding all the cards)

public function delete(Character $character)
    {
        if (!$this->authorized($character)) {
            abort(403);
        }

        if ($character->image) {
            Storage::disk('public')->delete($character->image->path);
            $character->image->delete();
        }

        $character->delete();

        $this->dispatch('characters-overview.show');
    }

From CharactersOverview too

#[On('characters-overview.show')]
    public function render()
    {
        $this->characters = Project::find($this->project->id)->characters()->get();

        return view('livewire.characters-overview');
    }

[wik0rl]

Hi @bjhfransen,

I am facing exactly the same problem in a quite similar setup. Did you manage to find a solution for this?

[amansaini419]

Any solution to this problem?

I guess when modal is closed after deleting, that time reset state is called and it doen't found the record and give 404.

Can we avoid calling resetState? Or do we need to change config value?

My config value:

[gzai]

This issue comes from Livewire not from wire-elements modal. Livewire hydrates all the models including the one deleted.
you can add softdelete on your table and model, or you can make a blank value from your model $this->yourModel = YourModel::make(); after deleted code.

[amansaini419]

I fixed this problem.

No need to use softdeletes too.

Don't use any mode class in your mount method, instead use primary id. Then use Model::find(id) and then delete it.

If you use model class directly and deletes it, it will delete from database and you will find empty value for that model when livewire refreshes it.

If required any assistance can reply here.