[LiveComponent] circular reference exception with nested component

[fGuix]

Hi,

Since this commit, one of my nested component is not working anymore with a circular reference exception.

My nested component is called like this:

{{ component('article-list-item',{
    article: article
}) }}

'article' is build in the parent component and is an entity.

I configured the liveprops attributes like this :

    #[LiveProp(useSerializerForHydration: true, serializationContext: ['groups'=> ['article-list']], updateFromParent: true)]
    public Article $article;

The group 'article-list' is defined in my entity to avoid circular reference, but when debugging, the context seems to be ignored on calling AddLiveAttributesSubscriber->getLiveAttributes().

The exception stack trace

Symfony\Component\Serializer\Exception\
CircularReferenceException
A circular reference has been detected when serializing the object of class "App\Entity\Article" (configured limit: 1).

in vendor/symfony/serializer/Normalizer/AbstractNormalizer.php (line 200)
in vendor/symfony/serializer/Normalizer/AbstractObjectNormalizer.php -> handleCircularReference (line 155)
in vendor/symfony/serializer/Debug/TraceableNormalizer.php -> normalize (line 45)
in vendor/symfony/serializer/Serializer.php -> normalize (line 152)
in vendor/symfony/serializer/Serializer.php -> normalize (line 170)
in vendor/symfony/serializer/Normalizer/AbstractObjectNormalizer.php -> normalize (line 216)
in vendor/symfony/serializer/Debug/TraceableNormalizer.php -> normalize (line 45)
in vendor/symfony/serializer/Serializer.php -> normalize (line 152)
in vendor/symfony/serializer/Normalizer/AbstractObjectNormalizer.php -> normalize (line 216)
in vendor/symfony/serializer/Debug/TraceableNormalizer.php -> normalize (line 45)
in vendor/symfony/serializer/Serializer.php -> normalize (line 152)
in vendor/symfony/serializer/Serializer.php -> normalize (line 170)
in vendor/symfony/serializer/Debug/TraceableSerializer.php -> normalize (line 76)
in vendor/symfony/ux-live-component/src/Util/FingerprintCalculator.php -> normalize (line 49)
in vendor/symfony/ux-live-component/src/Util/LiveControllerAttributesCreator.php -> calculateFingerprint (line 80)
in vendor/symfony/ux-live-component/src/EventListener/AddLiveAttributesSubscriber.php -> attributesForRendering (line 89)
in vendor/symfony/ux-live-component/src/EventListener/AddLiveAttributesSubscriber.php -> getLiveAttributes (line 55)
in vendor/symfony/event-dispatcher/Debug/WrappedListener.php -> onPreRender (line 116)
in vendor/symfony/event-dispatcher/EventDispatcher.php -> __invoke (line 206)
in vendor/symfony/event-dispatcher/EventDispatcher.php -> callListeners (line 56)
in vendor/symfony/event-dispatcher/Debug/TraceableEventDispatcher.php -> dispatch (line 127)
in vendor/symfony/ux-twig-component/src/ComponentRenderer.php -> dispatch (line 105)
in vendor/symfony/ux-twig-component/src/ComponentRenderer.php -> preRender (line 58)
in vendor/symfony/ux-twig-component/src/ComponentRenderer.php -> render (line 51)
in vendor/symfony/ux-twig-component/src/Twig/ComponentExtension.php -> createAndRender (line 58)
in var/cache/dev/twig/84/8490c051c83aa9f0658111f825fb52ce.php -> render (line 74)
in vendor/twig/twig/src/Template.php -> doDisplay (line 394)
in vendor/twig/twig/src/Template.php -> displayWithErrorHandling (line 367)
in vendor/twig/twig/src/Template.php -> display (line 379)
in vendor/twig/twig/src/TemplateWrapper.php -> render (line 40)
in vendor/twig/twig/src/Environment.php -> render (line 280)
in vendor/symfony/ux-twig-component/src/ComponentRenderer.php -> render (line 61)
in vendor/symfony/ux-twig-component/src/ComponentRenderer.php -> render (line 51)
in vendor/symfony/ux-twig-component/src/Twig/ComponentExtension.php -> createAndRender (line 58)
in var/cache/dev/twig/e3/e38e0e52e30f6c3ad0aea4a4ca64d737.php -> render (line 91)
in vendor/twig/twig/src/Template.php -> block_main (line 171)
in var/cache/dev/twig/a4/a4677bb6829e0dc73909cbd81f897b4d.php -> displayBlock (line 82)
in vendor/twig/twig/src/Template.php -> block_body (line 171)
in var/cache/dev/twig/2b/2b5176e928a44eb9b7c91030db1285e2.php -> displayBlock (line 84)
in vendor/twig/twig/src/Template.php -> doDisplay (line 394)
in vendor/twig/twig/src/Template.php -> displayWithErrorHandling (line 367)
in var/cache/dev/twig/a4/a4677bb6829e0dc73909cbd81f897b4d.php -> display (line 49)
in vendor/twig/twig/src/Template.php -> doDisplay (line 394)
in vendor/twig/twig/src/Template.php -> displayWithErrorHandling (line 367)
in var/cache/dev/twig/e3/e38e0e52e30f6c3ad0aea4a4ca64d737.php -> display (line 48)
in vendor/twig/twig/src/Template.php -> doDisplay (line 394)
in vendor/twig/twig/src/Template.php -> displayWithErrorHandling (line 367)
in vendor/twig/twig/src/Template.php -> display (line 379)
in vendor/twig/twig/src/TemplateWrapper.php -> render (line 40)
in vendor/twig/twig/src/Environment.php -> render (line 280)
in vendor/symfony/framework-bundle/Controller/AbstractController.php -> render (line 242)
in vendor/symfony/framework-bundle/Controller/AbstractController.php -> renderView (line 253)
AbstractController->render('default/index.html.twig', array())
in src/Controller/IndexController.php (line 30)
in vendor/symfony/http-kernel/HttpKernel.php -> indexLocale (line 163)
in vendor/symfony/http-kernel/HttpKernel.php -> handleRaw (line 74)
in vendor/symfony/http-kernel/Kernel.php -> handle (line 184)
in vendor/symfony/runtime/Runner/Symfony/HttpKernelRunner.php -> handle (line 35)
in vendor/autoload_runtime.php -> run (line 29)

Am I doing something wrong or is it a bug ?

[weaverryan]

Hi there!

I expect to see a good number of messages similar to this for 2.8. In 2.8, we're a bit more restrictive about what you can have as LiveProps. That being said, you found the useSerializerForHydration stuff, which "nearly" gives you the 2.7 behavior. So, you're doing the right thing! Unrelated to this, I WOULD recommend storing scalar values whenever possible on LiveProp (or persisted entities) - e.g. passing the individual pieces of data into your embedded component instead of an unpersisted entity. But I don't really see a big problem with what you're doing.

About the bad behavior, indeed, looks like a bug - we actually serialize when trying to determine the "fingerprint" https://github.com/symfony/ux/blob/2.x/src/LiveComponent/src/Util/FingerprintCalculator.php#L49 - and that is new code. Let me check into fixing that.

Btw, do you need the updateFromParent? Removing that would fix this. You only need that if, when the parent changes the article object in some way, you want to force the child to re-render. If you tell me a bit more, there may be a better way to solve what you're trying. I have a similar parent-child component relationship for a ux.symfony.com demo - https://github.com/symfony/ux/blob/2.x/ux.symfony.com/src/Twig/InvoiceCreator.php

Cheers!

[fGuix]

Hi @weaverryan !

Thanks for the quick response.

In my case the structure is as follow :
Filters and container (Live component with filters)
-> List of articles (Live component with pagination, sorting)
-> Article boxes (Live component with custom actions like adding multiples to cart)

In my parent component, i build the list of articles depending on the filters.
It's then given as liveprop in the form of an array of scalars/ids to the list who sort and paginate (hydration of array of entities was not working at the time and I think it's not wanted).
Finally all those articles are displayed in the box components where I use updateFromParent.

The boxes are re-rendered when the sorting change on the list (doesn't work without updateFromParent). I could again use a scalar value between the list and the boxes, but I'm not sure it would change the result.

This nested approach was made earlier this year when the communication between components via events was not available. I would probably do a bit differently nowadays ;)

[weaverryan]

Ok, let's see! When you call:

{{ component('article-list-item',{
    article: article
}) }}

Are that article ALWAYS persisted? Or is it sometimes unpersisted? I realized I had thought that sometimes these were unpersisted. But re-reading your message, I'm not sure that's the case anymore.

If they ARE always persisted, then you shouldn't need to use the serializer at all your $article LiveProp is a persisted entity... so you can "do nothing" and LiveComponents will dehydrate this to its id for you.

The boxes are re-rendered when the sorting change on the list (doesn't work without updateFromParent). I could again use a scalar value between the list and the boxes, but I'm not sure it would change the result.

I'm not sure I totally understand the situation (are "boxes" referring to each "article list item" or are these form checkboxes?). But if the idea is that you need to "re-render" the article list when the sorting changes, then this should happen out-of-the-box. However, there is a 99% likelihood that you need to pass a key prop into each component:

{{ component('article-list-item',{
    article: article:
    key: article.id
}) }}

Ref: https://symfony.com/bundles/ux-live-component/current/index.html#rendering-quirks-with-list-of-embedded-components

What's likely happening is that LiveComponents can't tell the difference between the "first" and "second" articles in the list without this key. So when your list re-renders, live components thinks "Hmm, I see a first and second article, but children should render in isolation, so I will not overwrite what's already on the page". By adding the key, it will now see, for example, that "article id 5" was removed, so that child should be removed. And "article id 7" is new, so it should render that fresh.

[fGuix]

@weaverryan
ok ! I updated to last commit, removed `updateFromParent, added the 'key' (didn't saw that last time I checked the doc) and it works fine now 🥳
Thanks for the help and quick fix.