Netlify deployment Cannot query field "allContentfulGallery" on type "Query"

492 views Asked by At

I am creating an application on React.js, Gatsby.js, and Contentful. My Application is working fine on my local but when I deploy my app to Natilify Cannot query field "allContentfulGallery" on type "Query". And My GraphQl Queries are also working fine. Please help me I am very sticking by this error."allContentfulGallery" is my collection Name

Very thanks in advance

My gatsby-node.js configuration

  const galleryResult = await graphql(`
    query gallery {
      allContentfulGallery {
        edges {
          node {
            title
            slug
            images {
              title
              file {
                url
              }
            }
            sys {
              contentType {
                sys {
                  id
                  linkType
                  type
                }
              }
              revision
              type
            }
          }
        }
      }
    }
  `)  
  var galleryArr =
    galleryResult &&
    galleryResult.data &&
    galleryResult.data.allContentfulGallery &&
    galleryResult.data.allContentfulGallery.edges
  galleryArr.forEach(edge => {
    createPage({
      path: `/gallery/${edge.node.slug}`,
      component: galleryTemplate,
      context: {
        title: edge.node.title,
        slug: edge.node.slug,
        sys: {
          ...edge.node.sys,
        },
      },
    })
  })
1

There are 1 answers

0
Ferran Buireu On BEST ANSWER

It seems (according to the comments) that the environment variables are not properly set, since they work locally (under both environments, gatsby develop and gatsby build) but not on GitLab nor Netlify.

Dealing with Gatsby + Netlify requires to prefix all environment variables with GATSBY_ as you can see in Netlify docs:

Any environment variables prefixed with GATSBY_ are processed by Gatsby and made available in the browser for client-side JavaScript access. Visit the Gatsby docs about environment variables for more information.

So, change all variables locally, and in Netlify's and GitLab dashboard prefixing them with GATSBY_.

CONTENTFUL_ENVIRONMENT
CONTENTFUL_API_KEY
CONTENTFUL_SPACE_ID

Will become:

GATSBY_CONTENTFUL_ENVIRONMENT
GATSBY_CONTENTFUL_API_KEY
GATSBY_CONTENTFUL_SPACE_ID

Keep in mind that this approach applies to all environment variables, not only for the Contentful ones.

Normally I'm pretty sure about the resolutions but in your case, if you haven't set the environment variables properly, the plugin configuration should fail, breaking the compilation before your issue prompts and it's not the case.