render random moreArticles

src/components/Articles/Articles.js

@@ -8,12 +8,15 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => {
     <>
       <div className="articles">
         <div className="articles-content">
-          {edges.map(({ node }, i) => {
+          {edges.length <= 0
-            if (i < limit) {
+            ? <p>Записей нет</p>
-              return <ArticleCard key={i} data={node.frontmatter} />
+            : edges.map(({ node }, i) => {
-            }
+                if (i < limit) {
-            return null
+                  return <ArticleCard key={i} data={node.frontmatter} />
-          })}
+                }
+                return null
+              })
+          }
         </div>
         <div className="articles-loadMore">
           {edges.length === limit || edges.length <= limit 

src/components/Articles/MoreArticles/MoreArticles.js

@@ -14,9 +14,9 @@ const MoreArticles = () => {
         <h2>Вам также может понравится...</h2>
       </div>
       <div className="more-articles__content">
-        {edges.map(({ node }, e) => {
+        {edges.filter(({ node }) => node.frontmatter.slug !== query).sort(() => Math.random() - 0.5).map(({ node }, i) => {
-          if (node.frontmatter.slug !== query) {
+          if (i < 4) {
-            return <ArticleCard key={e} data={node.frontmatter} />
+            return <ArticleCard key={i} data={node.frontmatter} />
           }
           return null
         })}

src/hooks/useMoreArticlesQuery.js

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 const useMoreArticlesQuery = () => {
   const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
     {
-      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, limit: 4) {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, sort: {order: DESC, fields: frontmatter___date}, limit: 6) {
         edges {
           node {
             frontmatter {