Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested component definitions via Item Link returns only IDs #61

Closed
sowhatdoido opened this issue Sep 20, 2018 · 11 comments
Closed

Nested component definitions via Item Link returns only IDs #61

sowhatdoido opened this issue Sep 20, 2018 · 11 comments

Comments

@sowhatdoido
Copy link

@sowhatdoido sowhatdoido commented Sep 20, 2018

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:

image

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:
image

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

This comment has been minimized.

Copy link
Author

@sowhatdoido sowhatdoido commented Sep 20, 2018

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

This comment has been minimized.

Copy link
Author

@sowhatdoido sowhatdoido commented Sep 21, 2018

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 comment has been minimized.

Copy link
Contributor

@kamsar kamsar commented Sep 21, 2018

This is a bug.

@sowhatdoido

This comment has been minimized.

Copy link
Author

@sowhatdoido sowhatdoido commented Sep 21, 2018

@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:

image

@kamsar

This comment has been minimized.

Copy link
Contributor

@kamsar kamsar commented Sep 25, 2018

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 :)

@kamsar kamsar closed this Sep 25, 2018
@bouncehead13

This comment has been minimized.

Copy link

@bouncehead13 bouncehead13 commented Aug 8, 2019

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

This comment has been minimized.

Copy link
Contributor

@kamsar kamsar commented Aug 9, 2019

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

@bouncehead13

This comment has been minimized.

Copy link

@bouncehead13 bouncehead13 commented Aug 9, 2019

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

@sc-dawidrutkowski

This comment has been minimized.

Copy link
Collaborator

@sc-dawidrutkowski sc-dawidrutkowski commented Aug 9, 2019

@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.

@kamsar kamsar reopened this Aug 9, 2019
@bouncehead13

This comment has been minimized.

Copy link

@bouncehead13 bouncehead13 commented Aug 9, 2019

@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 added a commit that referenced this issue Aug 12, 2019
anastasiya29 added a commit that referenced this issue Aug 12, 2019
#61 Nested component definitions via Item Link returns only IDs
@sc-dawidrutkowski

This comment has been minimized.

Copy link
Collaborator

@sc-dawidrutkowski sc-dawidrutkowski commented Aug 12, 2019

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

sc-dawidrutkowski added a commit that referenced this issue Dec 3, 2019
* Added support for TypeScript when 'jss build'ing

* Type-hint field value.

* Update dataModels.ts

* Move type hint to Field.

* Type-lock return value when defaultValue provided.

* Fix to copy host style attribute to its children dynamic components

* changed spacing

* updates for ssr

* Add loader for lazy loaded components

* Add some documentation

* Placeholder loading component

* Use ng-template instead of ng-content

* Fix typo

* Export SitecoreContextReactContext

See #224

* WIP: simple http listener that accepts JSS view engine args, performs SSR, and returns result to caller.

* Moved JSS rendering host to separate package.

* SUGCON demo prep

* Removed unnecessary console.log statements from htmlTemplateFactory.js

* Changed `start:http-renderer` script name to `start:rendering-host`

* Demo content for content block component.

* Changed `sc_renderengineurl` querystring key to the CORRECT `sc_httprenderengineurl`. doh, smh.

* Incorporating `defaultAppInvocationInfoResolver` into the renderingHostServer startup script.

* removed static `jss` subdomain for ngrok tunnel

* Fixing tests

* #61 Nested component definitions via Item Link returns only IDs

* Upgrade dependencies with critical and high security issues (#252)

Upgrade dependencies

* Upgrade cypress

* downgrade dependency version

* Feature/356383 (#256)

Upgrade sitecore-jss-react package dependencies

* remove InferProps (#259)

remove InferProps

* Feature/356379 (#265)

* update react sample dependencies

* update dependencies and fix ts errors (#266)

Upgrade Vue package dependencies

* #267 Error in description of one of methods of Manifest interface

* Upgrade Vue sample (#269)

Upgrade Vue sample

* Feature/356380: Update Angular

* Upgrade jss-angular and jss-angular-schematics and jss-sample-app

* Feature/356378 (#272) Upgrade CLI Packages

Upgrade CLI Packages

* Use Object.entries instead of Object.keys (#274)

Use Object.entries instead of Object.keys

* mediaApi.updateImageUrl loses revision querystring (#275)

mediaApi.updateImageUrl loses revision querystring

* DevTools loading hidden files and crashing (#276)

* Feature/356373 (#273) Node Proxy: CURL URL -IL returns 500 OK

Node Proxy: CURL URL -IL returns 500 OK

* change logo (#279)

change logo

* upgrade react-native sample (#282)

upgrade react-native sample

* [React-Native] Extend Image component to render svg images (#283)

* add react-native-svg to sample app

* update react-native package-lock

* add react-native-svg to sitecore-jss-react-native

* #348713Explicitly state that field names are not affected by the serialization configuration on Layout Service (#284)

* #348713 Explicitly state that field names are not affected by the serialization configuration on Layout Service

* #348713 Update

* Extended a CD server setup instructions (#286)

* React native sample app (#291)

React native sample app
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.