I'm having trouble rendering an array of widgets in the correct order. I am using graphql to query page data from kentico's kontent.ai. A page in the cms has a rich text field that can include a number of widgets. When I console log the array of widget items from the graphql data object, however, the array is not in order. For example, if the order in the cms is:
text item, video item, image item
then in the array of objects, the order is something like:
[image item, text item, video item]
important: this only seems to happen when i am using more that 10 widgets in the rich text field. If I use up to ten widgets, the order is correct. but if I use more than 10, the order is incorrect.
This is strange, because it's not in order on my local or on the live site, but it is rendering in order on my colleagues local (even on the pages that render more than 10 items). We are using the same branch and there is no difference in the code. Do you know why this may be happening?
and is there some way I can make sure the order remains the same in array, as it is in the cms?
here is a simplified version of my query (it's the linked_items array that is not ordered correctly):
query workDetailQuery($slug: String!) {
kenticoCloudItemWorkDetailPage(fields: { slug: { eq: $slug } }) {
body_text {
linked_items {
... on KenticoCloudItemStatsBreaker {
internal {
type
}
}
... on KenticoCloudItemSectionBlock {
internal {
type
}
}
... on KenticoCloudItemQuoteWithImages {
internal {
type
}
}
}
}
}
}
This is a gatsby project (version 2.0.19), and i am using the gatsby-source-kentico-cloud package.
UPDATE so we managed to figure it out! It was just that the default node version on my machine and the node version netlify was using, was 10.19.0. We updated both versions (on my machine and on netlify) to 12.13.0 and now the order is correct.
