"Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

Question

I'm using the "gatsby-source-prismic-graphql" plugin from Gatsby to connect my Prismic repo with a component and display the blog post data as a card. The query works fine in GraphiQL, but when I implement the GraphQL query into the component Gatsby does not recognize "Prismic" in my query.

Ive tried displaying other data such as site metadata and that is working with no problems

Here is the Git repo: https://github.com/ENEIV/PrometheusIgnis

gatsby-config.js

// Prismic CMS
    {
      resolve: `gatsby-source-prismic-graphql`,
      options: {
        repositoryName: `prometheus`,
        accessToken: process.env.PRISMIC_KEY,
    },

Component querying data from Prismic

import React from "react"
import { RichText } from "prismic-reactjs"
import { StaticQuery, graphql } from "gatsby"

const articlesQuery = graphql`
  query {
    prismic {
      allArticless(uid: "prometheus-prismic-testing-1") {
        edges {
          node {
            article_title
          }
        }
      }
    }
  }
`

const Posts = () => (
  // const doc = data.prismic.allArticless.edges.slice(0, 1).pop()
  // if (!doc) return null
  <StaticQuery
    query={articlesQuery}
    render={data => (
      <h1>{RichText.render(data.prismic.edges.node.article_title)}</h1>
    )}
  />
)

export default Posts

Logan Blangenois · Accepted Answer · 2019-08-28 13:53:17Z

1

That's because you missing the 'allArticless' (allArticles, no ?) object in you RichText render {RichText.render(data.prismic.allArticles.edges.node.article_title)}.

By the way, I think you've got an array of multiple result in edges, no ? With allArticless you've got multiple page, so if the solution above doesn't work, try to map your result

data => { data.prismic.edges.map((article, index) => (
   <h1 key={`articleTitle-${index}}>{RichText.render(article.article_title)}</h1>
)}

answered Aug 28, 2019 at 13:53

Logan Blangenois

4132 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ENEIV Over a year ago

Wow --. Thanks for the help Logan. The code works but the RichText.render is throwing a warning in the browser "text argument should be an Array" and is not rendering the text, but the "article_title" is an array. _From GraphiQL

"node": {               "article_title": [                 {                   "type": "heading3",                   "text": "Prometheus Test #3",                   "spans": []                 }               ]             }

Kenn · Accepted Answer · 2021-05-04 08:01:58Z

0

📌There is a BIG DIFFERENCE between pulling data from a CMS through GraphQL using an "All..." and pulling data using a Single name of the query detail. And when calling multiple data, It's better to use a map method (map function) to pull all the data you need.

For example:

data => { data.prismic.edges.map((article, index) => (<h1 key={`articleTitle-${index}}>{RichText.render(article.article_title)}</h1>)}

As Logan just solved it.

answered May 4, 2021 at 8:01

Kenn

7061 gold badge6 silver badges7 bronze badges

Collectives™ on Stack Overflow

"Cannot read property 'node' of undefined" - Gatsby/GraphQL/Prismic

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related