gatsby can't fetch all graphql data on vercel production

Question

I am working on a Headless eCommerce website using Gatsby, Contentful. Shopify and Nacelle.

It works fine if I run the app using npm run dev, I can see all graphql data from Contentful.

That's what I mean is that all of graphql data can be fetched on the local side even npm run build, but it doesn't compile all of graphql data on production.

Here are some of the logs while building the gatsby app on Vercel.

The logs say that there's no errors, but I can see some of warnings from there.

Here's the graphql query, it works fine on local environment.

const HomePage = ({ data }) => {
  console.log('slider in index page---', data);
  ...
}

export const query = graphql`
  query {
    homepageSlider: nacelleContent(type: { eq: "heroBanner" }, handle: { eq: "home-slider" }) {
      title
      remoteFields
      featuredMedia {
        remoteImage {
          childImageSharp {
            gatsbyImageData(height: 2500, placeholder: TRACED_SVG)
          }
        }
      }
    }
    benefits: nacelleContent(type: { eq: "list" }, handle: { eq: "benefits" }) {
      handle
      title
      remoteFields
    }
    certificates: ...
    testimonial: ...
    satisfacts: ...
    collections: ...
  }
}

 

If I check the console log on vercel, it says all of the data has null except collections.

But all of the data exist if I check console log on local environment.

Why does this happen? It seems like a gatsby or vercel issue.

// package.json

...
"dependencies": {
    "@contentful/rich-text-from-markdown": "^15.0.0",
    "@contentful/rich-text-react-renderer": "^15.0.0",
    "@contentful/rich-text-types": "^15.0.0",
    "@emotion/core": "^10.0.35",
    "@loadable/component": "^5.14.1",
    "@nacelle/client-js-sdk": "^3.1.0",
    "@nacelle/gatsby-source-nacelle": "^2.10.2",
    "@nacelle/react-components": "^2.10.1",
    "@nacelle/react-dev-utils": "^2.10.1",
    "@nacelle/react-hooks": "^2.11.2",
    "@nacelle/react-recharge": "^2.11.0",
    "@react-hook/media-query": "^1.1.1",
    "autoprefixer": "^10.2.5",
    "change-case": "^4.1.2",
    "fuse.js": "^6.4.1",
    "gatsby": "^2.27.0",
    "gatsby-alias-imports": "^1.0.6",
    "gatsby-plugin-emotion": "^4.5.0",
    "gatsby-plugin-fullstory": "^3.2.0",
    "gatsby-plugin-google-tagmanager": "^3.2.0",
    "gatsby-plugin-image": "^1.1.2",
    "gatsby-plugin-manifest": "^3.1.0",
    "gatsby-plugin-postcss": "^4.1.0",
    "gatsby-plugin-react-helmet": "^4.2.0",
    "gatsby-plugin-scroll-reveal": "0.0.7",
    "gatsby-plugin-sharp": "^2.9.0",
    "gatsby-plugin-transition-link": "^1.20.5",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-transformer-sharp": "^2.7.0",
    "gsap": "^3.6.1",
    "nuka-carousel": "^4.7.7",
    "numeral": "^2.0.6",
    "postcss": "^8.2.8",
    "react": "^16.13.1",
    "react-alice-carousel": "^2.5.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "eslint": "^7.6.0",
    "eslint-plugin-react": "^7.20.5",
    "eslint-plugin-react-hooks": "^4.0.8",
    "lint-staged": "^10.2.11",
    "tailwindcss": "^2.0.4"
  },
  ...

// gatsby-config.js

require('dotenv').config();

module.exports = {
  plugins: [
    {
      resolve: '@nacelle/gatsby-source-nacelle',
      options: {
        nacelleSpaceId: process.env.GATSBY_NACELLE_SPACE_ID,
        nacelleGraphqlToken: process.env.GATSBY_NACELLE_GRAPHQL_TOKEN,
        cmsPreviewEnabled: process.env.NACELLE_PREVIEW_MODE,
        contentfulPreviewSpaceId: process.env.CONTENTFUL_PREVIEW_SPACE_ID,
        contentfulPreviewApiToken: process.env.CONTENTFUL_PREVIEW_API_TOKEN,
        cacheDuration: 1000 * 60 * 60 * 24 // 1 day in ms
      }
    },
    'gatsby-plugin-postcss',
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        start_url: `/`,
        icon: `src/images/favicon-32.png`, // This path is relative to the root of the site.
      }
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-image',
    'gatsby-plugin-emotion',
    'gatsby-alias-imports',
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-google-tagmanager`,
      options: {
        id: process.env.GOOGLE_TAG_MANAGER_ID,
        includeInDevelopment: false,
      },
    },
    `gatsby-plugin-scroll-reveal`,
    // `gatsby-plugin-transition-link`
  ]
};

UPDATE: Node v14.x is running on my local environment, and tried to select Node version 12 on the Vercel.

Many warning messages were disappeared, but I had no luck.

What I think that's weird is that I can see the content nodes difference between develop and build.

As you can see the images, it has created 128 content nodes while running npm run dev on the local side.

Otherwise, it has created only 100 content nodes on Vercel.

I am not sure if that is the main issue.

But basically gatsby has a rule of limitation for the content nodes?

Answer 1

Why does this happen? It seems like a gatsby or vercel issue.

It's hard to say with the provided details. To me, it seems that the Vercel server is facing a timeout response for some GraphQL queries/products/nodes (the warnings) so it could be a pang of shared guilt.

To debug and try to fix the issue at the same time, taking into account that the project works perfectly fine locally, I would try to match environments, starting by setting the same Node version. This will assure you that you are running the same dependency version.

Vercel allows you to configure the Node version from the backoffice or by setting a node property inside engine object in the package.json. From the docs:

Defining the node property inside engines of a package.json file will override the selection made in the Project Settings and print a Build Step warning if the version does not match.

In order to find out which Node.js version your Deployment is using, run node -v in the Build Command or log the output of process.version.

So add:

"engines": { "node": "12.x" }

Being 12.x the prompted version when running the node -v command.

Hopefully, this will fix your issue but if not, it would help you to debug better.