gatsby-source-wordpress : add a way to query posts in random order

Created on 19 Feb 2020  路  6Comments  路  Source: gatsbyjs/gatsby

Summary

Brief explanation of the feature.

When fetching posts with allWordpressPost there is no way to get the results in "random" order as it is possible in WP REST API. Maybe a good way to add it would be like so?

query MyQuery {
  allWordpressPost(sort: {order: RAND}, limit: 3) {
    edges {
      node {
        title
      }
    }
  }
}

Motivation

Sometimes a developer will want to show random posts as a way to diversify the navigation possibilities.

question or discussion

Most helpful comment

Not as neat as proposed feature, but you can achieve this by generating array of random ids in gatsby-node passing this via page context and using those in query to select pages:

// gatsby-node.js

export.sourceNodes = async ({ actions: { createPage }, graphql }) => {
  const result = await graphql(`
    allWordpressPost {
      nodes {
        id
      }
   }
  `)


createPage({
  path: `/some-path',
  component: require.resolve(`./src/templates/some-template`)
  context: {
    randomPostsIds: pickCoupleRandomValues(result.data.allWordpressPost.nodes.map(node => node.id))
  }
})

}
// in template
query ($randomPostsIds: [String!]!) {
  allWordpressPost(filter: { id: { in: $randomPostsIds } }) {
    nodes {
      title
    }
  }
}

All 6 comments

Thanks for the question.

I wonder if it makes sense for static sites? I mean after the page has been built users will always see the same list of posts anyway? So you'll need to rebuild the site to change the ordering again. Or am I missing something?

Thanks for the reply! Well, I guess you have got a point but it would nonetheless be useful even if the randomness is not at the access level, but at the page creation level. Still it would be interesting for some applications. Anyway, maybe it's not a priority issue :)

Not as neat as proposed feature, but you can achieve this by generating array of random ids in gatsby-node passing this via page context and using those in query to select pages:

// gatsby-node.js

export.sourceNodes = async ({ actions: { createPage }, graphql }) => {
  const result = await graphql(`
    allWordpressPost {
      nodes {
        id
      }
   }
  `)


createPage({
  path: `/some-path',
  component: require.resolve(`./src/templates/some-template`)
  context: {
    randomPostsIds: pickCoupleRandomValues(result.data.allWordpressPost.nodes.map(node => node.id))
  }
})

}
// in template
query ($randomPostsIds: [String!]!) {
  allWordpressPost(filter: { id: { in: $randomPostsIds } }) {
    nodes {
      title
    }
  }
}

Or creating custom resolver using schema customization that would do similar thing

Thank you for this solution, it will work great for what I need :)

Thank you for opening this!

We're marking this issue as answered and closing it for now but please feel free to comment here if you would like to continue this discussion. We also recommend heading over to our communities if you have questions that are not bug reports or feature requests. We hope we managed to help and thank you for using Gatsby!

Was this page helpful?
0 / 5 - 0 ratings