Data returning null

[iamjohnpeet]

Description: LocalFile and StructureText data is returned as null, whereas it is available in the dataRaw.

Data:

{
  "data": {
    "allPrismicPageTemplate": {
      "edges": [
        {
          "node": {
            "data": {
              "background_image": {
                "localFile": null
              },
              "left_content_copy": {
                "text": null
              }
            },
            "dataRaw": {
              "page_title": [
                {
                  "type": "heading1",
                  "text": "Test page template",
                  "spans": []
                }
              ],
              "background_image": {
                "dimensions": {
                  "width": 1667,
                  "height": 1003
                },
                "alt": null,
                "copyright": null,
                "url": "https://images.prismic.io/raecreative%2Fba4837cb-d2ed-42fb-9b68-4c8c9d4a5a8d_collection_management_campaign_editorial.jpg?auto=compress,format"
              },
              "left_content_copy": [
                {
                  "type": "paragraph",
                  "text": "Some left hand content",
                  "spans": []
                }
              ],
              "right_content_copy": [
                {
                  "type": "paragraph",
                  "text": "Some right hand content",
                  "spans": []
                }
              ],
              "right_content_video": {
                "link_type": "Media",
                "name": "RC Behind The Scenes FINAL_web quality.mp4",
                "kind": "document",
                "url": "https://raecreative.cdn.prismic.io/raecreative%2F6eb0e38b-827e-46d7-9695-3ce15a068ca1_rc+behind+the+scenes+final_web+quality.mp4",
                "size": "51702480"
              },
              "right_content_image": {
                "dimensions": {
                  "width": 3840,
                  "height": 5760
                },
                "alt": null,
                "copyright": null,
                "url": "https://images.prismic.io/raecreative%2F374a22bf-0ecd-4ef4-91da-e48eb73354f3_4.jpg?auto=compress,format"
              }
            }
          }
        }
      ]
    }
  }
}

Version: "gatsby-source-prismic": "^3.0.0-beta.14",

[angeloashmore]

Hi @jpeet86, thanks for trying out the latest beta. Could you post your gatsby-source-prismic config from your gatsby-config.js file?

In the latest beta, field inference has been disabled, so I'm wondering if you are correctly providing your Prismic custom type schemas to the plugin.

[iamjohnpeet]

@angeloashmore ...

require("dotenv").config({
    path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
    siteMetadata: {
        title: `Title`,
        description: `Description`,
        author: `Authort`,
    },
    plugins: [
        `gatsby-plugin-react-helmet`,
        `gatsby-plugin-sass`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images`,
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `gatsby-starter-default`,
                short_name: `starter`,
                start_url: `/`,
                background_color: `#663399`,
                theme_color: `#663399`,
                display: `minimal-ui`,
                icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
        },
        {
            resolve: 'gatsby-source-prismic',
            options: {
                repositoryName: '',
                accessToken: ``,
                path: '/preview',
                previews: true,
                // See: https://prismic.io/docs/javascript/query-the-api/link-resolving
                linkResolver: ({ node, key, value }) => doc => {
                    // Your link resolver
                },
                // See: https://prismic.io/docs/javascript/query-the-api/fetch-linked-document-fields
                fetchLinks: [
                    // Your list of links
                ],
                // See: https://prismic.io/docs/nodejs/beyond-the-api/html-serializer
                htmlSerializer: ({ node, key, value }) => (
                    type,
                    element,
                    content,
                    children,
                ) => {
                // Your HTML serializer
                },
                // Provide an object of Prismic custom type JSON schemas to load into
                // Gatsby. Providing the schemas allows you to query for fields present in
                // your custom types even if they are unused in your documents.
                schemas: {
                    // Your custom types mapped to schemas
                    pageTemplate: require('./src/schemas/page_template.json'),
                    homePage: require('./src/schemas/home_page.json'),
                    clientsPage: require('./src/schemas/clients_page.json'),
                    contactPage: require('./src/schemas/contact_page.json'),
                },
                // Set a default language when fetching documents. The default value is
                // '*' which will fetch all languages.
                // See: https://prismic.io/docs/javascript/query-the-api/query-by-language
                lang: '*',
                // Set a function to determine if images are downloaded locally and made
                // available for gatsby-transformer-sharp for use with gatsby-image.
                // The document node, field key (i.e. API ID), and field value are
                // provided to the function, as seen below. This allows you to use
                // different logic for each field if necessary.
                // This defaults to always return true.
                shouldNormalizeImage: ({ node, key, value }) => {
                    return true;
                    // Return true to normalize the image or false to skip.
                },
            },
        },
    ],
}

[rubas]

Problem with StructuredText still exists in beta-18.

Details about the schema and difference in #178 (copy / paste from Prismic Editor).

[angeloashmore]

@jpeet86 @rubas You should have a JSON file in your public folder with all the types for your fields. The filename should be something like prismic-typepaths---md5-hash.json.

Could you post that file here? Or at least that relevant part with the StructuredText fields? This will confirm that the field is set to the correct type.

[rubas]

From the prismic-typepaths---...

  {
    "path": ["page_aboutUs", "data", "text"],
    "type": "PrismicStructuredTextType"
  },

Custom Schema

    "text": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph",
        "label": "Text"
      }
    },

[angeloashmore]

@rubas Does anything change if you run gatsby clean to clear out any cached queries?

[rubas]

@angeloashmore I did a clean up. Hasnt changed something.

I did some debugging. It looks like that const normalizeStructuredTextField = async (id, value, _depth, context) => {} returns correct data

But Graphql returns null for html, text and raw.

[rubas]

But here I see that the text is saved in a non-normalized version.

  text: [
    { type: 'paragraph', text: 'a', spans: [] },
    { type: 'paragraph', text: '          foo', spans: [] },
    { type: 'paragraph', text: '          baal', spans: [] },
    { type: 'paragraph', text: '          iiii', spans: [] },
    { type: 'paragraph', text: '    bb', spans: [] }
  ],

[angeloashmore]

I wonder if it's not finding the type correctly. Are you able to see if normalizeField reaches the default case for that particular field?

We should add a reporter warning there to make issues like this easier to debug.

https://github.com/angeloashmore/gatsby-source-prismic/blob/35cd707bea698beb6cbb92088fe8b8d0691ca360/src/common/documentToNodes.js#L104

It's possible this lookup function does not work for all type names, though it appears that it would work fine.

https://github.com/angeloashmore/gatsby-source-prismic/blob/35cd707bea698beb6cbb92088fe8b8d0691ca360/src/common/documentToNodes.js#L8-L11

[rubas]

@angeloashmore That is the case. It falls through the switch because the type is undefined.

[rubas]

getTypeForPath([...depth, id], typePaths) returns undefined.

---

[...depth, id] = [ 'page_about-us', 'data', 'text' ]

typePaths =

[
...
  {
    path: [ 'page_aboutUs', 'data', 'text' ],
    type: 'PrismicStructuredTextType'
  },
...
]

---

The problem is with const def = typePaths.find(x => JSON.stringify(x.path) === stringifiedPath);

[rubas]

If you need a setup to replicate, I'm happy to share with you privately the full schemas and prismic endpoint.

[angeloashmore]

@rubas Yes, that would be helpful. Just the schema that's failing should be enough. You could send me a secret Gist link via Twitter (@angeloashmore).

[TatsumiSuenaga]

Hey @angeloashmore, per our discussion in #179 I have DM'd you a secret gist of the schema.

[rubas]

Big thanks to @angeloashmore for his help.

tl;dr Make sure to use the correct API IDs for Prismic. Do not convert foo-bar to fooBar.

Summary

If your API ID in Prismic uses a - like in page-foo, make sure you use 'page-foo': require('./src/schemas/page-foo.json') the schema definition in your gatsby-config.js

✅ Correct

schemas: {
  'page-foo': require('./src/schemas/page-foo.json')
},

‼️ Wrong

schemas: {
  pageFoo: require('./src/schemas/page-foo.json')
},

This may look like it works, but it does not! The key for the data will not match up and you'll get issues like this one here.

Improvements

As I understand @angeloashmore is planning to add some checks, to make sure this mistake gets detected automatically and you ll be warned.

Be aware

Technically you could setup two prismic types named foo-bar and fooBar. Just .. just don't do that, okay?

[ptrkvsky]

I have the same problem with my amazon schema https://github.com/ptrkvsky/conseil-piscine/blob/main/gatsby-config.js and my api id is exactly the same. data is null but not dataraw when i query with graphiql Do we have any solution ? EDIT : I had [ ] to start and end my schemas files, i removed them and it works fine now.

[mrseanbaines]

I'm using the v4 beta plugin and I think I have a similar issue. I was camelCasing field names with the transformFieldName config option and also using the custom types API with the customTypesApiToken config option:

import camelCase from 'camelcase'

// ...
customTypesApiToken: process.env.PRISMIC_CUSTOM_TYPES_API_TOKEN,
transformFieldName: camelCase,

This initially seemed to work, as the field names were camelCased in the GraphiQL editor, but anything that was more than one word would just return null (since single word fields are the same in snake_case and camelCase):

When removing the transformFieldName option, it return the correct value (but no camelCasing ☹️):

Is this the same issue, or should I write up a separate issue for this @angeloashmore? This feels like a bug with the transformFieldName option (or maybe customTypesApiToken, or a combination of the two).

Version: "gatsby-source-prismic": "4.0.0-beta.17"

[larsenwork]

@angeloashmore I tried to ensure I did things mentioned above in this thread but still have this issue with the latest 4.0.1 release of gatsby-source-prismic.

My config looks like this

const config: GatsbyConfig = {
  siteMetadata: {
    // siteMetadata here...
  },
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: '🙈',
        schemas: {
          'faq-category': require('../schemas/faq-category.json'),
          'faq-item': require('../schemas/faq-item.json'),
          job: require('../schemas/job.json'),
          'omhu-person': require('../schemas/omhu-person.json'),
          'press-coverage': require('../schemas/press-coverage.json'),
          'press-release': require('../schemas/press-release.json'),
          publication: require('../schemas/publication.json'),
          'static-pages': require('../schemas/static-pages.json'),
        },
      },
    },
    // Other plugins here...
  ],
}

export default config

And my faq-item.json looks like this

{
  "Main": {
    "question": {
      "type": "Text",
      "config": {
        "label": "question"
      }
    },
    "answer": {
      "type": "Text",
      "config": {
        "label": "answer"
      }
    },
    "answer-ritch": {
      "type": "StructuredText",
      "config": {
        "multi": "paragraph,strong,em,hyperlink,list-item,o-list-item",
        "allowTargetBlank": true,
        "label": "answer"
      }
    },
    "category": {
      "type": "Link",
      "config": {
        "select": "document",
        "customtypes": ["faq-category"],
        "label": "category"
      }
    },
    "rank": {
      "type": "Number",
      "config": {
        "label": "rank"
      }
    }
  }
}

and e.g.

query AllPrismicFaqItem {
  allPrismicFaqItem {
    nodes {
      data {
        answer_ritch {
          raw
        }
      }
      dataRaw
    }
  }
}

returns

{
  "data": {
    "allPrismicFaqItem": {
      "nodes": [
        {
          "data": {
            "answer_ritch": null
          },
          "dataRaw": {
            "answer-ritch": [
              {
                "type": "paragraph",
                "text": "🙈",
                "spans": []
              },
              {
                "type": "paragraph",
                "text": "🙈",
                "spans": []
              }
            ]
          }
        }
      ]
    }
  },
  "extensions": {}
}

any ideas?

Edit

It seems like it's because I have a hyphenated key in faq-item.json["Main"]["answer-ritch"] instead of e.g. faq-item.json["Main"]["answer_ritch"] — are hyphens not supported in keys?

[angeloashmore]

Hey @mrseanbaines (sorry for the delayed response!) and @larsenwork,

This definitely looks related to the transformFieldName option. I'll investigate and let you know what I find!

[angeloashmore]

@mrseanbaines @larsenwork, could you test the latest versions? I just published a change that should fix the issue.

• gatsby-source-prismic@4.0.2
• gatsby-plugin-prismic-previews@4.0.2

If the issue persists, let's open a new issue so we can track it better. Thanks!

[angeloashmore]

(I'm going to close this issue in the meantime as the original issue has been addressed. We can continue commenting here if necessary though!)

[larsenwork]

I can confirm that it fixes my issue. Thanks 🙏

[mrseanbaines]

Thanks @angeloashmore! I had to continue without the camelCasing so I'll need to do some refactoring at some point to try this out. Will let you know how it goes when I get the chance