Multiple templates in Gatsby.js - reactjs

Question

I'm pretty new to Gatsby and want to have multiple templates that i can use for my different pages, eg Landingpage, Contact and About cant have the same templates.
I have made a ugly code in gatsby-node.js for now but it only works for two templates, here is my code (btw I'm sourcing data from markdownfiles):
Mardownfile 1:
---
title: 'Index page'
slug: '/'
template: indexTemplate //This is where i declare which template it shall use
content: 'Index content'
---
Mardownfile 2:
---
slug: '/my-first-post'
date: '2019-05-04'
title: 'My first blog post!'
content: 'Content post 1'
template: postTemplate
---
gatsby-node.js:
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const result = await graphql(`
query{
allMarkdownRemark {
nodes {
frontmatter {
slug
template
}
}
}
}
`)
const postTemplate = require.resolve(`./src/templates/postTemplate.js`)
const indexTemplate = require.resolve(`./src/templates/indexTemplate.js`)
const aboutTemplate = require.resolve(`./src/templates/aboutTemplate.js`) // I also want a template for my aboutpage
// Handle errors
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result.data.allMarkdownRemark.nodes.forEach( post => {
createPage({
path: post.frontmatter.slug,
component: post.frontmatter.template === 'indexTemplate' ? indexTemplate : postTemplate, // Here is where the ugly "magic" happens...
context: {
slug: post.frontmatter.slug,
},
})
})
}

Answer 1

The idea of using gatsby-node.js is to create dynamic pages from some data source (CMS, markdown files, JSON files, external APIs, etc) with the createPage API. In other words, it's really useful to create dynamic pages that have an unknown slug or name from a data source. The idea is to query all types of data (posts for instance) and pass via context some unique information (normally the slug or the id) as a filter parameter to perform another query in your template.
In your case, that fits for your blog (markdown file 2), but not for other known pages such as index, about, etc (markdown file 1). They are defined and known pages and should be treated differently, using a page query. They are not templates because are unique pages, you won't have two different homes that can reuse a home template.
To identify different markdown pages, between posts and home page, for example, you can use a key value to filter your queries.
---
title: 'Index page'
slug: '/'
key: 'home'
template: indexTemplate //This is where i declare which component it shall use
content: 'Index content'
---
Content of the index page.
And:
---
slug: '/my-first-post'
date: '2019-05-04'
key: 'post'
title: 'My first blog post!'
content: 'Content post 1'
template: postTemplate
---
When creating a pages dyamically (via gatsby-node.js) the approach should look like:
const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const slug = createFilePath({ node, getNode, basePath: `pages` })
createNodeField({
node,
name: `slug`,
value: slug,
})
}
}
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
const result = await graphql(`
query {
allMarkdownRemark(
filter: { frontmatter: { key: { eq: "article" }}}) {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve(`./src/templates/blog-post.js`),
context: {
// Data passed to context is available
// in page queries as GraphQL variables.
slug: node.fields.slug,
},
})
})
}
Note the filter for the key value.
Then, in your blog-post (template):
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<Layout>
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
For your static pages, just make the query on the page. For your index.js:
import React from 'react'
import { graphql } from 'gatsby'
const HomePage = ({data}) => {
return (
<div>
Your page title is {data.nodes[0].frontmatter.title}
</div>
)
}
export const query = graphql`
query HomePageQuery {
allMarkdownRemark(filter: { frontmatter: { key: { eq: "home" }}}) {
nodes{
frontmatter{
title
}
}
}
}
`
export default HomePage
Feel free to adapt the code to your needs. The important thing is that you should differentiate between what should be used as a template (blog, posts, articles, or other dynamic data) and what should be handled statically (home, about, or other static pages).
Of course, upon the scope of the question, you can have multiple templates, let's say one for posts and the other for reviews (or other dynamic data). You can simply achieve it by saving your query result inside a variable and call twice the createPage API:
const result1 = await graphql(`
query{
allMarkdownRemark {
nodes {
frontmatter {
slug
template
}
}
}
}
`)
const result2 = await graphql(`
query{
allMarkdownRemark {
nodes {
frontmatter {
slug
template
}
}
}
}
`)
const postTemplate = require.resolve(`./src/templates/postTemplate.js`)
const reviewsTemplate = require.resolve(`./src/templates/reviewsTemplate.js`)
// Handle errors
if (result1.errors || result2.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
result1.data.allMarkdownRemark.nodes.forEach( post => {
createPage({
path: post.frontmatter.slug,
component: postTemplate
context: {
slug: post.frontmatter.slug,
},
})
})
result2.data.allMarkdownRemark.nodes.forEach( review => {
createPage({
path: review.frontmatter.slug,
component: reviewsTemplate
context: {
slug: review.frontmatter.slug,
},
})
})