Creating Lists of content with Gatsby and Drupal

By shane
Sat, 2019-09-07 19:35
comments
GatsbyJS, React
Series: 
Introduction To Gatsby
Daily Dose of Drupal Episode #4

Share with Others

In this episode, we pick up where we left off last time and cover how to create lists of content on your Gatsby site by pulling data from a Drupal 8 website. You will learn:

  1. How to filter and sort your GraphQL queries using GraphiQL explorer
  2. How to create a list of your content
  3. How to break up your list page into subcomponents
View Full Text Transcript

Make sure you have your Drupal site ready and your Gatsby development server running. Once you do that, open the GraphiQL by navigating to http://localhost:8000/___graphql. We are going to create a query that pulls in the last 10 articles with the most recent in front. We want the title, the image, the path alias, and the body text. For the body text, we want the processed body text, but also the summary text if it exists. Note: you will only see the summary option available if you add a summary to one of your articles on your Drupal site.

GraphiQL editor

Now open up your code editor and create a new file in src/pages and call it articles.js. Enter the code below into the new file. This code creates a new Page component called Articles that takes in a data prop. This data prop is populated by the GraphQL query at the botton. This GraphQL query is what you created in the GraphiQL interface. The list of articles is then mapped to a new component called ArticlePreview that we have not created yet. We will create this next.

import React from "react";
import PropTypes from 'prop-types';
import { graphql } from 'gatsby';
 
import Layout from "../components/layout";
import SEO from "../components/seo";
import ArticlePreview from "../components/articlePreview";
 
const Articles = ({ data }) => {
 const articles = data.allNodeArticle.nodes;
 
 return (
   <Layout>
     <SEO title="Articles" />
     <h1>Articles</h1>
     {articles.map(article => (
       <ArticlePreview
         key={article.id}
         title={article.title}
         path={article.path.alias}
         image={article.relationships.field_image.localFile.publicURL}
         alt={article.field_image.alt}
         summary={article.body.summary ? article.body.summary : article.body.processed.substring(0, 300)}
       />
     ))}
   </Layout>
 );
};
 
Articles.propTypes = {
 data: PropTypes.object.isRequired,
};
 
export const data = graphql`
 {
   allNodeArticle(
     sort: {fields: created, order: DESC}
     limit: 10
   ) {
     nodes {
       id
       title
       created
       body {
         processed
         summary
       }
       path {
         alias
       }
       field_image {
         alt
       }
       relationships {
         field_image {
           localFile {
             publicURL
           }
         }
       }
     }
   }
 }
`;
 
export default Articles;

In the src/components folder create a file called articlePreview.js and enter the code below. This file is a simple React component that outputs a preview of the Article with a title that links off to the actual Article page.

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'gatsby'
 
 
const ArticlePreview = ({ title, path, image, alt, summary }) => (
 <div>
   <Link to={path}>
     <h2>{title}</h2>
   </Link>
   <img src={image} alt={alt} />
   <div dangerouslySetInnerHTML={{__html: summary}} />
 </div>
);
 
ArticlePreview.propTypes = {
 title: PropTypes.string.isRequired,
 path: PropTypes.string.isRequired,
 image: PropTypes.string.isRequired,
 alt: PropTypes.string.isRequired,
 summary: PropTypes.string.isRequired,
};
 
export default ArticlePreview;

Now go ahead and try it out. You may find you need to stop and restart the Gatsby development server depending on if you have any errors in your code. Once you have it running you should be able to go to the /articles page and see a listing of the articles!

Gatsby Article Listing

If you click on the title you will be taken to the full article page. You now have a somewhat working blog site on Gatsby! Next time we will look at the Gatsby Image component to improve how our images are handled and in the future we will look at styling in Gatsby.