CODEWITHSUNDEEP
reactjsgatsbycontentfulgraphiql
Anchor-Point
Anchor-Point

Reputation: 51

adding clickable tags generated from contentful and gatsby

Pretty much follow this post Adding tags to Gatsby Contentful blog to a T but still can't find a reason why it's not working...

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  query($slug: String!, $tag: [String!]) {
    contentfulBrunchPost(slug: { eq: $slug }, tag: { in: $tag }) {
      title
      slug
      tag
    }
  }
`

const TagPost = props => {
  return <h1>{props.data.contentfulBrunchPost.title}</h1>
}

export default TagPost

I get the error "Cannot read property 'contentfulBrunchPost' of undefined". Very new to graphiQL in contentful and gatsby so point in the right direction would be awesome

Upvotes: 0

Views: 123

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29305

Extending from:

appreciate the help! I get the error "message": "Variable "$slug" of required type "String!" was not provided." any point in right direction? –

You've set the slug field as non-nullable (like required field) because of the exclamation mark (!). This means that must be provided from the gatsby-node.js file to the template (TagPost) so ensure that the field is always present or remove the nullability of the field to make it nullable:

export const query = graphql`
  query($slug: String, $tag: [String!]) {
    contentfulBrunchPost(slug: { eq: $slug }, tag: { in: $tag }) {
      title
      slug
      tag
    }
  }

Your createPage function should look like:

createPage({
  path: `/tag/${slugifiedTag}`,
  component: path.resolve("./src/templates/tag-post.tsx"), // your tagComponent
  context: {
    slug: edge.node.slug,
    tag: edges.node.tag
  },
})

Upvotes: 1

Taylor Krusen
Taylor Krusen

Reputation: 1033

I suggest going to your local version of Graphiql at http://localhost:8000/___graphql and copying your exact query over. Does the query return data over there? If not, then your query may be incorrect. If it does return data, then you can drill down into it to determine the correct reference to use in your code.

Upvotes: 1

Related Questions