Drupal + GraphQL + Gatsby code snippets

gatsby-node.js

const path = require("path");
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

// GraphQL Schema customization to download and attach images to GraphQL node
exports.createResolvers = (
  {
    actions,
    cache,
    createNodeId,
    createResolvers,
    store,
    reporter,
  },
) => {
  const { createNode } = actions
  createResolvers({
    Drupal_MediaImage: {
      gatsbyImageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: source.fieldMediaImage.url,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  return graphql(`
  {
    drupal {
      articles: nodeQuery(filter: {conditions: [{operator: EQUAL, field: "type", value: ["article"]}]}) {
        entities {
          uuid: entityUuid
          id: entityId
          entityUrl {
            path
          }
        }
      }
    }
  }
  `).then(result => {
    if (result.errors) {
      throw result.errors;
    }

    // Create articles.
    const articles = result.data.drupal.articles.entities;
    articles.forEach(article => {
      createPage({
        path: article.entityUrl.path,
        component: path.resolve(__dirname + '/src/templates/article.js'),
        context: {
          id: article.id,
          uuid: article.uuid,
          slug: article.entityUrl.path,
        }
      });
    });

  });
};

src_templates_article.js

import React from "react";
import PropTypes from "prop-types";
import { graphql } from 'gatsby';

import Layout from "../components/layout";

import PageTitle from "gatsby-theme-core/src/components/page-title";
import Tags from "gatsby-theme-core/src/components/tags";

import { componentResolver } from '../utils/component-resolver';

const ArticleTemplate = props => {

  const article = props.data.drupal.article;
  const sitename = props.data.site.siteMetadata.title;
  const contentComponents = componentResolver(article.fieldContent);
  let tags = [];
  {article.fieldTags && (
    article.fieldTags.map((item, i) => {
      tags.push(item.entity.name);
    })
  )}

  return (
    <Layout sitename={ sitename }>
      <Layout.Container>
        <PageTitle>
          <PageTitle.Intro>{ article.entityCreated }</PageTitle.Intro>
          <PageTitle.Title>
            { article.title }
          </PageTitle.Title>
        </PageTitle>
        <hr className="border-b-2 mx-auto w-2/3 border-gray-200 block h-1" />

        {contentComponents && (
          contentComponents.map((item, i) => {
            return (
              <React.Fragment key={i}>
                {item}
              </React.Fragment>
            )
          })
        )}

        <Tags tags={ tags } />
      </Layout.Container>
    </Layout>
  );
};

export default ArticleTemplate;

export const pageQuery = graphql`
  query article($id: String!) {
    drupal {
      article: nodeById(id: $id) {
        uuid: entityUuid
        id: entityId
        title
        path {
          alias
        }
        entityCreated(format: "M d, yy")
        ... on Drupal_NodeArticle {
          fieldContent {
            entity {
              ...ParagraphFeature
              ...ParagraphQuote
              ...ParagraphTextContent
              ...ParagraphTextImage
            }
          }
          fieldTags {
            entity {
              name
            }
          }
        }
      }
    }
    site {
      siteMetadata {
        title
      }
    }
  }
`