Graphql error Connecting Gatsby to a Strapi CMS Heroku Backend

Questions and Answers Frontend-Gatsby
1

I’m trying to connect a Gatsby frontend to Strapi on Heroku. On my local machine it I have the same strapi server and gatsby works fine with it.
In gatsby-config.js when I switch the value of apiURL from ‘http://localhost:1337’ to ‘https://[my-app].herokuapp.com’, I get graphql errors and the gatsby build crashes. I am getting a lot of graphql errors like this:

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "publicURL" on type "StrapiHomepageSeoShareImage".

If you don't expect "publicURL" to exist on the type "StrapiHomepageSeoShareImage" it is most likely a typo.
However, if you expect "publicURL" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "publicURL" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "StrapiHomepageSeoShareImage":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src/components/layout.js:16:15

 ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "publicURL" on type "StrapiGlobalFavicon".

If you don't expect "publicURL" to exist on the type "StrapiGlobalFavicon" it is most likely a typo.
However, if you expect "publicURL" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "publicURL" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "StrapiGlobalFavicon":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

File: src/components/seo.js:134:9

The graphql plugin is working fine the Strapi server on Heroku, and works when I query it from postman. It’s just it’s not the same behavior when I run it locally without issues. This seems to be a graphql schema mapping issues where the generated schema is faulty when pointed at the production server.

Any advice for me?

2

Hey there, i dont know if solve this but i know It always expects a result to be filled, at least for one.

As i read on other blog “The ideal solution is to customize your schema by adding a type definition”

im having the same issue and looking how to solve it.

3

Did you ever find a solution for this? I am having exactly the same issue.

4

Hi there! New to using Strapi, but encountered this error following this gatsby strapy tutorial. In my case, the fix was changing the queries for the publicURL fields on the ShareImage and Favicon types from

query {
    strapiGlobal {
      siteName
      favicon {
        publicURL
      }
      defaultSeo {
        metaTitle
        metaDescription
        shareImage {
          publicURL
        }
      }
    }

to

query {
    strapiGlobal {
      siteName
      favicon {
        localFile {
            publicURL
        }
      }
      defaultSeo {
        metaTitle
        metaDescription
        shareImage {
          localFile {
             publicURL
          }
        }
      }
    }

and update uses from favicon.publicURL / shareImage.publicURL to favicon.localFile.publicURL / shareImage.localFile.publicURL