Randomise sort of array in component

[NickBarreto]

Similar to this proposed feature, it would be useful for me to be able to, only one time, on build, shuffle the order of an array of items passed into a component. The component displays images from gatsby-plugin-image, which are links to detail pages in specific items.

Both for performance reasons (I don't want to delay rendering this component until the shuffle has happened – it's the first thing on the page, above the fold), as well as user expectations, I don't want the placement to change on page reload or revisit (I want the user to find the items in the same place they were before on each page visit).

That said, we will likely be rebuilding our site at least once a week, maybe more often, to account for changes in the source API. And it would be nice if each time the order of the elements on this component changed. This post is a great example on how to get the component to shuffle each time on page load, but the delayed drawing is (rightfully) affecting my lighthouse scores, and as I said it's maybe not the best UI to change this if the user decides to go back and pick another item.

For the time being, I've made the choice that the shuffle isn't worth the trouble.

But I can't help but think, if I create a random order that evaluates on build, during static site generation, the result of which is passed into the component, and no longer changes, I can have the performance of no shuffle, but also change the order around once a week (or more often) when we run a scheduled build for updates or new content from changes in my source API.

But I'm not sure how I'd go about it. Currently this component in in my homepage, which is just in src/pages/index.js, and has it's own page query. I guess those sorts of operations are perfect for placing in my gatsby-node file.

Would I need to change my strategy of how this page is generated, instead using createPage explicitly for it and passing the random order in as context, as suggested in the feature proposal? Could I go about it another way?

[violy]

I don't really understand your need, but you should use predictable random numbers to perform your shuffle ?

[violy]

questions ; you want to perform the shuffle :

• at each runtime
• at each build time
• preserved between (some) builds
• dependent to arbitrary editorial trigger
• unique for each visitor, but persistent during the navigation
• …

(multiples choices and other answers are possible)

[NickBarreto]

Hi Arthur,

Thanks for your response.

Those are all good questions. I'd say I want to perform the shuffle at build time only, though I'm not necessarily wedded to that as the only option.

To give a little more context: I have a component on my homepage, and it has 8 of the most recently added items on the site. Items get added relatively reguarly, but not so often, meaning an item may end up being one of the 8 quite a while.

The component just shows the 8 items in a grid, with 4 being bigger, and 4 being smaller.

At the moment, I'm just leaving the items to appear in the natural order the component receives them in, but it would be nice if they shuffled around each build, so as to not necessarily give any item more prominence than another.

As my homepage, the items are gathered from a page graphql query in an index.js file in my /pages folder.

As I said above, I think if I'm doing the shuffle in gatsby-node and passing them in on createPage, I probably need to build the homepage differently, I assume.

[violy]

Yes, you can simply move your home page to gatsby-node.js via createPage and use pageContext to populate the randomness statically in the template.

To do this, move the index.js from src/pages/ to an arbitrary path like src/templates/

[violy]

your gatsby-node.js should look like :

const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
    const {createPage} = actions

    // query your items as you want
    const result = await graphql(`
      {
        allItems {
          nodes {
            postId
          }
        }
      }
    `)

    // shuffle the items
    const items_shuffled = result.data.allItems.nodes.sort((a, b) => 0.5 - Math.random());

    // create the root path "/" instead of use "src/pages/index.js"
    createPage({
        path: `/`,
        component: path.resolve(`src/templates/index.js`),
        context: {
            items_shuffled: items_shuffled,
        },
    })
}

and in the src/templates/index.js file (very lighten version !) :

import React from "react"

const HomePage = ({pageContext}) => {
    const {items_shuffled} = pageContext
    return (<pre>{JSON.stringify(items_shuffled,null,2)}</pre>)
}

export default HomePage