index.js

import React from 'react'
// import { Link } from 'gatsby'

import Layout from '../components/layout'
import PostsList from '../components/posts_list'
import PostsFilter from '../components/posts_filter'
const IndexPage = (data) => {
  console.log('Index.js', data.length)
  return (
    <Layout>
      <PostsFilter />
      <PostsList posts={data.data.allWordpressPost} />
    </Layout>
  )
}

export const query = graphql`
  query homeQuery {
    allWordpressPost(limit:24) {
      edges {
        node {
          id
          slug
          title
          content
          excerpt
          date
          modified
          better_featured_image {
             source_url
          }
          acf {
            priority
          }
          categories {
             id
             slug
             name
          }
        }
      }
    }
  }
`;

export default IndexPage

posts_list.js

import React from "react";
import PostsIterator from './posts_iterator'

class PostsList extends React.Component {
  getPosts = (posts) => {
    return posts.edges.sort(function(a, b){
      if (a.node.acf === null || b.node.acf === null) {
        return b.date - a.date;
      }
      return b.node.acf.priority - a.node.acf.priority})
  }

  splitArrayIntoChunks(arr, chunkLen){
      var chunkList = []
      var chunkCount = Math.ceil(arr.length/chunkLen)
      for(var i = 0; i < chunkCount; i++){
          chunkList.push(arr.splice(0, chunkLen))
      }
      return chunkList
  }

  render = () => {
    let postsChunks = this.splitArrayIntoChunks(this.getPosts(this.props.posts), 7);
    console.log('posts_list.js', postsChunks.length);
    return (
      <div className="post-list">
        {postsChunks.map((chunk, i) =>
          <PostsIterator posts={chunk} key={i}/>
        )}
      </div>
    )
  }
}

export default PostsList