Skip to content

Instantly share code, notes, and snippets.

@jmolivas
Last active February 7, 2020 22:52
Show Gist options
  • Save jmolivas/5d171452571b5ba6b98a5c3c7258d049 to your computer and use it in GitHub Desktop.
Save jmolivas/5d171452571b5ba6b98a5c3c7258d049 to your computer and use it in GitHub Desktop.
Drupal + GraphQL + Gatsby code snippets
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,
}
});
});
});
};
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
}
}
}
`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment