Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Creating Pages For Tags #22

Open
thedivtagguy opened this issue Jun 11, 2021 · 1 comment
Open

Creating Pages For Tags #22

thedivtagguy opened this issue Jun 11, 2021 · 1 comment

Comments

@thedivtagguy
Copy link

thedivtagguy commented Jun 11, 2021

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"]

On the website:
image

I am trying to create a page for each of these categories and tags. 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.

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,
          },
        });
      });
      resolve()
    })
  })
}

When I visit the page for one of the tags I know exists (like photoshop), I get a 404. What am I doing wrong and how can I fix it?

@thedivtagguy
Copy link
Author

Is there a problem with my query on the tagsTemplate page?

import { graphql } from "gatsby"
import React from "react"
import SiteMetadata from "../components/SiteMetadata"
import Cards from "../components/Cards"
import Layout from "../layouts/Layout"

const Tags = ({ data }) => {
    return (
        
      <Layout>
        <div>Tags</div>
      </Layout>
    );
  };
  
  export default Tags;

  export const query = graphql`
  query($tag: String) {
      item: contentfulPortfolio(filter: {tools: {eq: $tag}}) {
        edges {
          node {
            id
          }
        }
      }
    }
  ````

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant