Gatsby: Creating Pages from Contentful Fields - reactjs

Question

Each of my posts on Contentful has some associated 'categories' with it. For example, one post might contain:
major: "HCD"
year: "1st Year"
tools: ["R", "Python", "Wordpress"]
These are just fields called major, year etc. with these values but they are treated as individual categories.
On the website, they are displayed as such:
I am trying to create a page for each of these categories. For example, if a user clicks on Photoshop, they should be taken to a page tags/photoshop and all posts containing that tag should be listed out.
Fortunately, I was able to find this guide to help me do this. However, the guide is not for Contentful data so I'm having a bit of trouble on how to do this. I have created the tagsTemplate.jsx and but I'm stuck at creating the actual pages.
For example, this is what I did to try and create pages for tools:
My gatsby-node.js file looks like this:
const path = require(`path`)
const _ = require('lodash');
exports.createSchemaCustomization = ({ actions }) => {
const { createTypes } = actions
const typeDefs = `
type contentfulPortfolioDescriptionTextNode implements Node {
description: String
major: String
author: String
tools: [String]
files: [ContentfulAsset]
contact: String
}
type ContentfulPortfolio implements Node {
description: contentfulPortfolioDescriptionTextNode
gallery: [ContentfulAsset]
id: ID!
name: String!
related: [ContentfulPortfolio]
slug: String!
major: String!
files: [ContentfulAsset]
author: String!
tools: [String]!
year: String!
thumbnail: ContentfulAsset
url: String
contact: String
}
`
createTypes(typeDefs)
}
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions
return new Promise((resolve, reject) => {
graphql(`
{
portfolio: allContentfulPortfolio {
nodes {
slug
tools
}
}
}
`).then(({ errors, data }) => {
if (errors) {
reject(errors)
}
if (data && data.portfolio) {
const component = path.resolve("./src/templates/portfolio-item.jsx")
data.portfolio.nodes.map(({ slug }) => {
createPage({
path: `/${slug}`,
component,
context: { slug },
})
})
}
const tools = data.portfolio.nodes.tools;
const tagTemplate = path.resolve(`src/templates/tagsTemplate.js`);
let tags = [];
// Iterate through each post, putting all found tags into `tags`
tags = tags.concat(tools);
// Eliminate duplicate tags
tags = _.uniq(tags);
// Make tag pages
tags.forEach(tag => {
createPage({
path: `/tags/${_.kebabCase(tag)}/`,
component: tagTemplate,
context: {
tag
},
});
});
console.log("Created Pages For" + tags)
resolve()
})
})
}
My tagsTemplate is minimal right now, since I don't know how to query the data:
import React from 'react';
import Layout from "../layouts/Layout"
const Tags = ({ data }) => {
return (
<Layout>
<div>Tags</div>
</Layout>
);
};
export default Tags;
The problem: When I visit the page for one of the tags I know exists (like photoshop), I get a 404. Why are these pages not being created?
What am I doing wrong and how can I fix it? How can this be generalized for three of my 'categories'?

Answer 1

According to what you said in the comments:
I tried console.log(tags) but is shows it as undefined
I did that and it is just a blank space. Does that mean there is nothing in tags at all?
Your contact function looks good, the approach is good since you are adding the tools (list of tags) into a new array to clean it up and leaving unique values (uniq). Once done, you loop through the unique tags and create pages based on that array.
That said, there are a few weak points where your house of cards can fall apart. Your issue start in this line:
const tools = data.portfolio.nodes.tools;
And propagates through the code.
nodes is an array so, to get any value you should do:
const tools = data.portfolio.nodes[0].tools;
To get the first position and so on...
Since tools is never populated, the rest of the code doesn't work.
You can easily fix it looping through the nodes and populating your tags array with something similar to:
const toolNodes = data.portfolio.nodes;
const tagTemplate = path.resolve(`src/templates/tagsTemplate.js`);
let tags = [];
// Iterate through each post, putting all found tags into `tags`
toolNodes.map(toolNode => tags.push(toolNode.tools);
// if the fetched data is still an array you can do toolNodes.map(toolNode => tags.push(...toolNode.tools);
// Eliminate duplicate tags
tags = _.uniq(tags);
// Make tag pages
tags.forEach(tag => {
createPage({
path: `/tags/${_.kebabCase(tag)}/`,
component: tagTemplate,
context: {
tag
},
});
});
console.log("Created Pages For" + tags)