Gatsby Source Drupal
In this lesson, you will install and configure the gatsby-source-drupal
plugin. You will connect your Gatsby site to your Drupal site and pull in some
articles.
gatsby-node.js
/*** Implement Gatsby's Node APIs in this file.** See: https://www.gatsbyjs.org/docs/node-apis/*/// You can delete this file if you're not using itconst path = require('path');exports.createPages = async ({ actions, graphql }) => {const { createPage } = actions;const articles = await graphql(`{allNodeArticle {nodes {idtitlepath {alias}}}}`);articles.data.allNodeArticle.nodes.map(articleData =>createPage({path: articleData.path.alias,component: path.resolve(`src/templates/article.js`),context: {ArticleId: articleData.id,},}));}
src/templates/article.js
import React from 'react';import PropTypes from 'prop-types';import { graphql } from 'gatsby';import Layout from '../components/layout';const Article = ({ data }) => {const post = data.nodeArticle;return (<Layout><h1>{post.title}</h1><imgsrc={post.relationships.field_image.localFile.publicURL}alt={post.field_image.alt}/><div dangerouslySetInnerHTML={{ __html: post.body.processed }}/></Layout>);};Article.propTypes = {data: PropTypes.object.isRequired,};export const query = graphql`query($ArticleId: String!) {nodeArticle(id: { eq: $ArticleId }) {idtitlebody {processed}field_image {alt}relationships {field_image {localFile {publicURL}}}}}`;export default Article;