Sorting Linked Items (widgets) in GraphQL

nikki gom asked on February 17, 2020 19:52

Hello, I'm having trouble rendering an array of widgets in the correct order. I am using graphql to query page data from kentico. The page has a rich text field that can include a number of widgets. When I console log the array of objects, however, the array of widgets 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

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. 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 (the linked_items array is not ordered correctly when I console log it):

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
                    }
                }
            }
        }
    }
} 

UPDATE: 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.

Recent Answers


Grzegorz Perko answered on February 25, 2020 11:14

Hello, I got same problem, but problem is when i change order components in CMS then after saved order in CMS was changed then linked_items get old ordering.

0 votesVote for this answer Mark as a Correct answer

nikki gom answered on March 5, 2020 13:11

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.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.