StaticQuery2.js

import React, { Component } from 'react';
import { StaticQuery, graphql } from 'gatsby';
import PropTypes from 'prop-types';
import c from 'classnames';
import LatestGrid from 'components/latest-grid';
import * as s from './LatestArticles.module.scss';

export default class LatestArticles extends Component {
  static propTypes = {
    count: PropTypes.number,
    title: PropTypes.string,
  };

  static defaultProps = {
    count: 4,
    title: 'Latest from mParticle',
  };

  render() {
    const { count, title, customArticles } = this.props;

    return (
      <StaticQuery
        query={graphql`
          {
            allPrismicArticle(
              filter: {
                data: {
                  featured: { ne: "no" }
                  invisible: { ne: "yes" }
                  publish_date: { ne: null }
                }
              }
              sort: { fields: first_publication_date, order: DESC }
              limit: 4
            ) {
              edges {
                node {
                  uid
                  id
                  type
                  data {
                    article_type
                    featured
                    invisible
                    publish_date
                    author {
                      document {
                        ... on PrismicPerson {
                          data {
                            name
                            title
                          }
                        }
                      }
                    }
                    intro_text
                    category {
                      document {
                        ... on PrismicArticleCategory {
                          data {
                            name
                          }
                        }
                      }
                    }
                    publish_date
                    event_date
                    image {
                      alt
                      url
                      localFile {
                        childImageSharp {
                          gatsbyImageData
                        }
                      }
                    }
                    thumbnail {
                      alt
                      url
                      localFile {
                        childImageSharp {
                          gatsbyImageData
                        }
                      }
                    }
                    title
                  }
                }
              }
            }
          }
        `}
        render={({ allPrismicArticle }) => {
          const defaultArticles = allPrismicArticle.edges.map(({ node }) => node);
          const filteredCustomArticles = customArticles.filter((val) => {
            if (!val) return false;
            const {
              data: { invisible, featured },
            } = val;
            return invisible !== 'yes' && featured !== 'no';
          });

          const articles = [...filteredCustomArticles, ...defaultArticles].slice(0, 4);

          return (
            <div className={c(s.container, `up-${count}`)}>
              <h2 className={s.title}>{title}</h2>
              <LatestGrid articles={articles} />
            </div>
          );
        }}
      />
    );
  }
}