Gatsby: Handling broken queries if Prismic field is not added using gatsby-source-prismic

[eric-personal]

I'm using gatsby-source-prismic and all works great but sometimes if I have a media link that a content manager on Prismic doesn't add a video or image then my GraphQL query will break because the type is there but the URL is not or been stripped out. Not sure how gatsby-source-prismic works under the hood so don't want to say its the plugin that's stripping out the url.

Unknown field 'url on type video

  query HomePageQuery {
     page: prismicHomePage {
          type
            data {
              video {
                 url
                   ^
               }
           }
       }

Anyone know a way around stopping this from breaking GraphQL ?

[Juan-Rios]

If I understand correctly I wouldn't say the GraphQL query breaks, probably the query will return "url": null. I think you can handle it by adding conditionals in render() before the return (should work for stateless components as well).

I'll set a quick example:

render() {
    let urlContent;

    if(data.video.url) {
        urlContent = <a href={data.video.url}>Check the video</a>;
    } else {
        urlContent = <div>The user did not provide a video.</div>
    }

    return(
        { urlContent }
    )
}

Let me know if that helps.

[eric-personal]

Yes that's what I tried to do but when I don't add a link to the Prismic "Configuration of link field filed" it doesn't show url as null. It just doesn't have a reference to the object at all. I would love it it had url set to null then I could do exactly what you are saying.

But I did notice if you setup templates then what you are saying works. This only seems to happen with Priismic pages. Not Prismic Templates.

Error message in GraphiQL for pages is "errors": [

    {
      "message": "Cannot query field \"video\" on type \"primary_42\".",

[metamas]

I would love to know more about this as well. Even simple text fields that haven't been filled out on Prismic will break my build. According to the Prismic docs their API should at least respond with an empty string (or array), for fields that have not been given content. So, why am I not see this reflected in my GraphQL query responses?

[Juan-Rios]

Turns out that the solution I gave in my previous comment worked for me because I already had a different post with all the fields populated, so that allowed GraphQL to return null for the empty fields in the new post.

Anyway, what you guys found is a known issue, you can find more about it in the following links (it's not something about Prismic but more about the interaction with that kind of APIs and Gatsby).
https://github.com/gatsbyjs/gatsby/issues/2392
https://github.com/gatsbyjs/gatsby/issues/3344
https://stackoverflow.com/questions/47373455/gatsbyjs-how-to-handle-empty-graphql-node-from-contentful-plugin

Sadly I don't think there's a good workaround yet.

[LekoArts]

Closing this as duplicate, see issues above.