Null Document Data With Plug-in Swap

I have a Gatsby project using Prismic and am in the middle of the plug-in swap. However, I am needing to go through and refactor all of the queries due to the new plug-in and have been having some issues getting data to return on any of the document fields. All of them return null. This was not an issue with the old plug-in. Trying to query data from the body field does the same. Can someone please help? The new plug-in I am referring to is the gatsby-source-prismic.

Hello Maddy, thanks for reaching out about this, I'll be happy to help you.

Have you seen our dedicated guide for migrating to gatsby-source-prismic?

A key step in the migration that is not supper obvious is that you need to manually add your Custom type JSON files to your project, so the GraphQL schema recognizes your fields, slices, and whatnot.

Can you show me an example of the queries you're making, and where exactly are you getting stuck?

I have seen this documentation and I have manually added all the custom types to my project. I am able to retrieve other data but not any slices.

This is a query using the old plug-in that I have tried to refactor using the new plug-in:

export const query = graphql`
  {
    prismic {
      content: allHome_page__generals {
        edges {
          node {
            meta_title
            meta_description
            hero_header
            hero_copy
            hero_image
            market_challenge_text
            services_eyebrow
            services_image
            services_header
            services_copy
            about_eyebrow
            about_header
            about_copy
            careers_eyebrow
            careers_header
            careers_copy
            careers_background
            careers_image
            library_eyebrow
            library_header
            library_copy
            library_challenge_text
            featured_project {
              ... on PRISMIC_Publication {
                _meta {
                  uid
                }
                title
                summary
                image
                body {
                  ... on PRISMIC_PublicationBodyProject_proof_data {
                    primary {
                      stat_1_value
                      stat_1_context
                      stat_1_source
                      stat_2_value
                      stat_2_context
                      stat_2_source
                      stat_3_value
                      stat_3_context
                      stat_3_source
                    }
                  }
                }
              }
            }
            publications {
              publication {
                ... on PRISMIC_Publication {
                  _meta {
                    id
                    uid
                  }
                  title
                  type
                  image
                  summary
                }
              }
            }
          }
        }
      }
      markets: allMarkets(sortBy: priority_ASC) {
        edges {
          node {
            name
            thumbnail
            _meta {
              uid
            }
          }
        }
      }
    }
  }
`;

When I try to access the feauture project ...on PRISMIC Publication or any other slices in any of the queries I get null.
Here is a quick example trying to access just the feature project as in the query above:

query MyQuery {
  allPrismicHomePageGeneral {
    edges {
      node {
        data {
          featured_project {
            document {
              ... on PrismicPublication {
                id
              }
            }
          }
          about_header
          careers_eyebrow
          hero_header
        }
      }
    }
  }
}

Here is the response I get in the GraphiQL playground:

{
  "data": {
    "allPrismicHomePageGeneral": {
      "edges": [
        {
          "node": {
            "data": {
              "featured_project": {
                "document": null
              },
              "about_header": "Mutual Success",
              "careers_eyebrow": "CAREERS",
              "hero_header": "We are POWER"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

Again, this is one example. I get null for the document on every query I have tried to retrieve document data in.

Thank you for sending over this info.

If everything is set up correctly it's a bit difficult to tell if something isn't right in your queries just at first glance. But maybe is something related to the custom types, perhaps the naming of a slice.

If you want you can send me your project code if you have it in Github or in a zip file; and Prismic repo name, that way I'll be able to reproduce the issue first hand. You can send me these via dm.

Let me know if this would be a good option for you.

Thanks

That would be amazing, Paulina! I have a meeting on Tuesday to provide an update to the client and would love to have this sorted out. I'll send the DM right now.

Update: Using dashes in Custom type names or in the API IDs of the fields can cause problems in the GraphQL schema. If your Custom type name has a dash e.g.,
home_page_-_general

You need to wrap the name in single quotes in the gatsby-config.js:

'home_page_-_general': require('./src/schemas/home_page_-_general'),

Also, make sure you're using the latest version of the plugin, you can check the latest version on npm here.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.