Gatsby `e.spans is undefined`

[flexbox]

Hey!

I am in the process of migrating from gatsby-source-prismic-graphql to gatsby-source-prismic

"gatsby-source-prismic": "^3.3.6",
"prismic-reactjs": "^1.3.3",

I am almost done but I have a weird issue with RichText render={content}

I got this data from the GraphQL query

[
  {
    "type": "paragraph",
    "text": "Agnès VARDA est donc née en Belgique en 1928. Après avoir rejoint la ville de Sète avec ses parents en 1940, elle se rend sur Paris pour y passer son baccalauréat et, par la suite, pour étudier la photographie à l’école des beaux-arts du Louvres. Son talent est très rapidement repéré par les Galeries LAFAYETTE et la SNCF qui l'engagent comme photographe pour leur société au début des années 1950.",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "heading2",
    "text": "Membre de “La nouvelle Vague” ",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "C’est en 1954 qu’elle commence une carrière de cinéaste avec son film La Pointe Courte, nom éponyme d’un quartier de Sète, avec Silvia MONFORT et Philippe NOIRET jouant les rôles principaux. Ce premier long métrage met en avant le beau quartier sétois à travers plusieurs plans magnifiquement bien cadrés.",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "Ce film permet à Agnès d’être reconnue à part entière comme une membre fondatrice de “la Nouvelle Vague”. Cette expression est née dans la presse française à la toute fin des années 1950. Elle désigne en tout et pour tout les films présentés au festival de Cannes de 1959. En effet, c’est à cette époque que plusieurs techniques cinématographiques sont redécouvertes ou revisitées. Les plans sont plus mobiles, la couleur remplace lentement et progressivement le noir et blanc (les premières pellicules de couleurs sont crées en 1928 par l’entreprise américaine Technicolor) et l’apparition des “Films-documentaires” plait à un large public.",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "Le talent de Agnès est si fabuleux, qu’elle a reçu ces derniers prix alors que sa carrière n’était pas terminée ! Seule la nature a eu raison de notre artiste nationale si puissante, le 29 mars 2019, il y a tout juste 2 ans ... Reposez en paix (coeur). ",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "Son film autobiographique Varda par Agnès retrace toute l’histoire d’Agnès, par Agnès. ",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "À vous, pionnière du mouvement de “la Nouvelle Vague”, à vous qui avez été une idole pour tant de personnes, des artistes, des cinéastes, des militant.e.s féministes !",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "Un grand merci !",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "Par CAUJOLLE Jordan",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "",
    "url": null,
    "alt": null,
    "copyright": null
  },
  {
    "type": "paragraph",
    "text": "",
    "url": null,
    "alt": null,
    "copyright": null
  }
]

And the error is this one

Do you have an idea on how to fix the problem?

[angeloashmore]

Hey @flexbox,

That output from Gatsby doesn't look normal. Can you share your gatsby-source-prismic plugin options from gatsby-config.js? My initial guess is that Gatsby is inferring the types rather than using the Custom Type schemas from the schemas plugin option.

In case you didn't already provide your schemas, here's some documentation on how to do so: https://github.com/angeloashmore/gatsby-source-prismic#providing-json-schemas

And how to query Rich Text fields: https://github.com/angeloashmore/gatsby-source-prismic#query-rich-text-fields

If you're using the <RichText> component from prismic-reactjs, you will need to query for the raw field within a Rich Text field and pass that value to <RichText>.

[flexbox]

// gatsby-config.js

const {
  prismicRepo,
  releaseID,
  accessToken,
} = require("./prismic-configuration")

const siteConfig = require("./siteConfig")
const linkResolver = require("./src/utils/linkResolver")
const reponame = process.env.PRISMIC_REPO_NAME || prismicRepo
const apiKey = process.env.PRISMIC_API_KEY || accessToken
const prismicReleaseID = process.env.PRISMIC_RELEASE_ID || releaseID

const blogPostSchema = require("./custom_types/blog_post.json")
const faqSchema = require("./custom_types/faq.json")

const gastbySourcePrismicConfig = {
  resolve: "gatsby-source-prismic",
  options: {
    repositoryName: reponame,
    accessToken: apiKey,
    releaseID: prismicReleaseID,
    prismicToolbar: true,
    linkResolver: () => (doc) => linkResolver(doc),
    schemas: {
      blogPostSchema: blogPostSchema,
      faqSchema: faqSchema,
    },
  },
}

module.exports = {
  siteMetadata: {
    ...siteConfig,
  },
  plugins: [
    gastbySourcePrismicConfig,
    `gatsby-transformer-sharp`, // Needed for dynamic images
    `gatsby-plugin-sharp`,
    `gatsby-plugin-sitemap`,
    ...
  ]
}

And with your input I made some progress

prismicBlogPost(uid: { eq: $uid }) {
      ...PrismicPostFragment
      dataRaw { <------ changed to dataRaw
        content {
          type
          text
          dimensions {
            width
            height
          }
          spans {   <----- added these missing part 
            start
            end
            type
          }
          alt
          copyright
          url
        }
      }
    }

but now I have another error 😅 element.data is undefined

[angeloashmore]

Hey @flexbox, I'm so sorry that I missed your reply in my notifications. That query and error shows that Gatsby does not have the correct schema loaded.

dataRaw is normally a JSON field which does not allow querying for fields within it. Because it allows you to do so, it means Gatsby is inferring the type.

My guess is that your Blog Post custom type's API ID is actually blog_post and not blogPostSchema. Can you update your gatsby-config.js to use the following?

    schemas: {
      blog_post: blogPostSchema,
      faq: faqSchema,
    },

There's a call out to this issue in the README:

Note: The names of your schemas in the schemas object should be exactly the same as your custom type's API ID. For example, if your API ID is "blog-post", your key should be "blog-post", not "blog_post".

You can confirm your custom type's API ID by querying for its type field.

Thanks! Let me know if this fixes the issue.

[angeloashmore]

I'm going to close this issue as it is Gatsby-specific, but feel free to reply here and I'll check back. Or we can continue in the gatsby-source-prismic repo as well.

Thanks!

[flexbox]

Thank you for your time @angeloashmore and your answer 🚀 I need to work back on the project but as a freelance priorities changed 😅