Nested component definitions via Item Link returns only IDs

[sowhatdoido]

I'm not entirely sure if this is a bug or if this is as expected, but it seems like when I try to link objects beyond a certain level, only the IDs are returned.

In my case, I'm trying to link the following:
Hero -> Card -> Stats

Hero is connected to the Card component via type: CommonFieldTypes.ItemLink,
Card is connected to Stats via type: CommonFieldTypes.ContentList,
and Stats are just objects with text fields.

Using this set up, I get the following returned in the api:

If I take the card definition out of the equation and link Hero directly with stats via type: CommonFieldTypes.ContentList, I get what I would expect:

Note I left card in there so we can see the difference.

Is there a limitation to using ItemLink, or is it a mistake on my end? Note that this is in disconnected mode. Here is a gist of some of the relevant code: https://gist.github.com/sowhatdoido/c1115c7adc5cc9efc0c7c1ee6b586a97

[sowhatdoido]

We did a little bit more research and it seems like this occurs when you're using an ItemLink to any other element, whether it's ContentList or another ItemLink. We also noticed that this issue with the only the ids returning only occurs in disconnected mode; the JSON returns as expected in when in connected mode.

[sowhatdoido]

It looks like what might be happening is when you assign the referenced content to it's corresponding ids in the expandReferencedContent function, it's creating a deep copy for the target, but expanding the original reference. For instance:

Hero -> Card -> Stats are all referencing each other by ID.

A deep clone occurs of the card element and gets stored to the hero, and a deep clone of the stats are assigned to the card, but never the cloned card element that was assigned to the hero.

[kamsar]

This is a bug.

[sowhatdoido]

@kamsar. If you flip the usage array so that it resolves from the bottom up, it will resolve the references in the children before cloning to the parent. You can fix it in one of two ways:

In expandReferencedContent.js in the sitecore-jss-manifest package, you can reverse the array before traversing it

- idMap.usages.forEach(function (idReference) {
+ idMap.usages.reverse().forEach(function (idReference) {
        expandedItems = true;
        var source = idMap.ids.get(idReference.id);

It would be more performant if you guys updated createIdMapping.js to use unshift instead of push, which will result in a reversed array during creation.

I don't know if there are any unforeseen side effects for this change as we don't have access to any tests, but making that change in my local node_modules seemed to have resolved the problem:

[kamsar]

I tested this using the latest internal version and this has been already fixed for the final release (I can replicate it with a TP4 sample app, and not so with the current internal release using the same definitions and content).

We appreciate you taking the time to report the issue and diagnose what's going on :)

[bouncehead13]

I'm running into this exact problem currently with the latest JSS release of 12.0.0. When applying the reverse() function it works as expected.

@kamsar Do you know if this bug has resurfaced and should reopened? While the workaround addresses it, every time we refresh the node modules, we'll have to add reverse().

@sowhatdoido Are you still experiencing this behavior of just getting the id-value returned?

[kamsar]

As far as I know, there were no changes to this code in JSS 12. @sc-dawidrutkowski?

[bouncehead13]

To be more specific, this bug exist in JSS 11 as well. It is not new to JSS 12.

[sc-dawidrutkowski]

@kamsar I was not doing anything with this for sure.
@bouncehead13 If you are still facing this problem please re-open this issue and I will take a look. Any additional details which are not in this discussion would be helpful.

[bouncehead13]

@kamsar @sc-dawidrutkowski Thank you both for looking into this! I provided my use case, similar to the one in this ticket already.

Tested with JSS Version: 11.0.2 (Also tried JSS 12 with no luck)

My Definition/Data Files look something like this

Route (contains 1 ItemLink)

// Using ItemLink
"background": { "id": "PromoMediaImage" }

Data (contains 1 ItemLink)

{
    "id": "PromoMediaImage",
    "componentName": "MediaImageComponent",
    "name": "Promo Image",
    "fields": {
        "imageSize": "auto",
        // Using ItemLink
        "breakpoint": { "id": "PromoBreakpoints" }
    }
}

Output From JSS

"background": {
    "id": "available-in-connected-mode",
    "fields": {
        "imageSize": {
            "value": "auto"
        },
        "breakpoint": {
            "value": {
                "id": "PromoBreakpoints"
            }
        }
    }
}

So you can see the output does not return the fully expanded referenced items.

[sc-dawidrutkowski]

@bouncehead13 Fix for this issue is merged. I'm closing this one.