Skip to content

Instantly share code, notes, and snippets.

@tanaypratap
Created April 6, 2019 07:09
Show Gist options
  • Save tanaypratap/c676022402d4fadbe1dad4c1b1a78c21 to your computer and use it in GitHub Desktop.
Save tanaypratap/c676022402d4fadbe1dad4c1b1a78c21 to your computer and use it in GitHub Desktop.
Creating Pages in Gatsby from different data sources and template
/** extracted page creation functionality into smaller functions **/
const path = require('path');
function createBlogPostsPages(result, createPage) {
const blogPostTemplate = path.join(__dirname, `../src/templates/blog-post.js`);
const blogPosts = result.data.blogs.edges;
blogPosts.forEach((post, index) => {
const previous = index === blogPosts.length - 1 ? null : blogPosts[index + 1].node;
const next = index === 0 ? null : blogPosts[index - 1].node;
createPage({
path: post.node.fields.slug,
component: blogPostTemplate,
context: {
slug: post.node.fields.slug,
previous,
next,
},
});
});
}
function graphqlForBlogs(graphql, createPage) {
return graphql(`
{
blogs: allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { type: { eq: "blog" } } }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`).then(result => {
if (result.errors) {
throw result.errors;
}
// Create blogPosts pages.
createBlogPostsPages(result, createPage);
});
}
exports.graphqlForBlogs = graphqlForBlogs;
/** extracted page creation functionality into smaller functions **/
const path = require('path');
function createTalkPostsPages(result, createPage) {
const talkPostTemplate = path.join(__dirname, "../src/templates/talk-post.js");
const talkPosts = result.data.talks.edges;
talkPosts.forEach((post, index) => {
const previous = index === talkPosts.length - 1 ? null : talkPosts[index + 1].node;
const next = index === 0 ? null : talkPosts[index - 1].node;
createPage({
path: post.node.fields.slug,
component: talkPostTemplate,
context: {
slug: post.node.fields.slug,
previous,
next,
},
});
});
}
function graphqlForTalks(graphql, createPage) {
return graphql(`
{
talks: allMarkdownRemark(
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { type: { eq: "talk" } } }
limit: 1000
) {
edges {
node {
fields {
slug
}
frontmatter {
title
}
}
}
}
}
`).then(result => {
if (result.errors) {
throw result.errors;
}
// Create talkPosts pages.
createTalkPostsPages(result, createPage);
});
}
exports.graphqlForTalks = graphqlForTalks;
/** Main file to create pages, notice how a Promise.all helps in getting more create page calls */
const { graphqlForTalks } = require("./create-pages/create-pages-talks");
const { graphqlForBlogs } = require("./create-pages/create-pages-blogs");
const { createFilePath } = require(`gatsby-source-filesystem`)
function createIndividualPages(actions, graphql) {
const { createPage } = actions;
return Promise.all([
graphqlForBlogs(graphql, createPage),
graphqlForTalks(graphql, createPage)
])
}
exports.createPages = ({ graphql, actions }) => {
return createIndividualPages(actions, graphql);
}
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment