Propiedad $refresh en los componentes de Laravel Livewire

▶

Una de las complicaciones que yo veo con Livewire, es decir, un punto negativo si lo comparamos con Inertia o directamente con Laravel o la implementación en sí misma, es que la considero a veces muy abstracta y existen muchas formas de hacer lo mismo.

El Problema de la Consistencia en la Interacción
¿A qué me refiero con esto? Por ejemplo, en este caso, tenemos un sencillo problema. Tenemos un componente de detalle y el de Carrito incluido dentro del de detalle:

ShowComponent.php
@if ($post->type == 'advert')
   <div class="mycard mb-5 ms-auto block max-w-96">
       <div class="mycard-body">
           @livewire('shop.cart')
       </div>
   </div>
   @empty(session('cart')[$post->id])
   {{-- si el item esta en el carrito, removemos la opcion de agregar --}}
       <div class="mycard-primary mb-5 block max-w-96">
           <div class="mycard-body">
               <h3 class="text-center text-3xl mb-4">Add this item</h3>
               @livewire('shop.cart', ['post' => $post, 'type' => 'add'])
           </div>
       </div>
   @endempty
@endif

El problema es que, cuando interactuamos con el carrito de compras, queremos recargar el componente de Detalle, ya que hay otros componentes relacionados. Pero, no tenemos una forma directa.

Los componentes de componentes en Livewire son complejos

La solución, lamentablemente, no es tan sencilla, y es lo que yo digo que puede ser un poco abstracto todo lo que tenga que ver aquí con los componentes en Livewire. Ya que, pues nada, podría haber muchas formas de hacer lo mismo y puede que no quede tan claro qué es lo que tenemos que hacer: si recargar toda la página con JavaScript, si hacerlo mediante Alpine, que también existen algunas formas, si comunicar de alguna manera el componente, si utilizar las keys para redibujar el componente o directamente la propiedad de la cual te voy a hablar.

A lo que me refiero es que hay muchas formas de hacer lo mismo, y es bastante abstracto y complicado realmente de saber qué es lo que tenemos que hacer, que es un poco de lo que yo quiero hablar en las siguientes dos clases. Ya que, otra vez, esto es algo un poco trivial lo que queremos hacer, pero para llegar a ello realmente, al menos a mí, me cuesta un poquito.

Introducción a la Propiedad "Refresh"

Entonces, ¿qué es lo que quiero hablar sobre refresh? Ya aclarado un poco eso, ya que a lo que queremos llegar es a recargar ese componente. Entonces, para esto, fíjate que tenemos una propiedad que tampoco la referencian muy bien, llamada refresh. En este ejemplo, lo está utilizando desde un botón, por ejemplo:

   @endempty
   <button type="button" wire:click="$refresh">Refresh Demo</button>
@endif

Entonces, ahora veremos que recarga toda la página principal, incluyendo los componentes del carrito, que es lo que queremos.

Alternativas y la Comunicación entre Componentes

En este ejemplo, no estamos comunicando los componentes, sino directamente estamos recargando este. Otra forma, que sería un poquito más eficiente, sería redibujar esto mediante una key, que creo que vamos a ver algo de eso. Digo que sería un poquito más eficiente porque, obviamente, cuando estamos recargando, estamos haciendo una vez otra vez una petición al servidor y no va a recargar o no va a refrescar solamente esta parte de componentes, sino también lo que es este componente matriz. Pero en este caso, realmente nos importa poco porque es una publicación, pero bueno, como te digo, bastante abstracto todo esto.

El problema es que en ambos casos el componente y los componentes son hermanos, entonces, y todo está en el show, y tenemos y son independientes, pero por más que sea, esa acción no sucede directamente en el show, sino directamente en el componente hijo.

Tal vez con Alpine sí pudiéramos hacer algo, pero ahí es un poco lo comentado al inicio, se complica bastante la lógica simplemente para hacer esa recarga. Entonces, en estos casos, al igual que hice antes cuando estaba aquí recargando (que no sé qué, ahora apareció porque no me aparece esto en rojo, luego chequeo), cuando estamos haciendo aquí la "piratilla" que te dije de que queríamos colocar esto en rojo, a veces prefiero hacer ese tipo de implementaciones que no me están funcionando por alguna razón. No sé qué pasó, ahorita veo, en vez de estar aquí dándole mil vueltas ahí cómo se pudiera hacer, entre comillas, de la manera correcta, que estarías metiendo el pin, como quien dice, de la manera más eficiente. Entonces, antes de llegar a eso, prefiero recargar todo el componente.