gatsby 无法获取有关 vercel 生产的所有 graphql 数据

如何解决gatsby 无法获取有关 vercel 生产的所有 graphql 数据

我正在使用 Gatsby、Contentful 开发 Headless 电子商务网站。 Shopify 和 Nacelle。

如果我使用 npm run dev 运行应用程序，它工作正常，我可以看到来自 Contentful 的所有 graphql 数据。

这就是我的意思，即使是 npm run build 也可以在本地获取所有 graphql 数据，但它不会在生产中编译所有 graphql 数据。

以下是在 Vercel 上构建 gatsby 应用程序时的一些日志。

日志说没有错误，但我可以从那里看到一些警告。

这是 graphql 查询，它在本地环境中运行良好。

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: ...
  }
}

 

如果我检查 vercel 上的控制台日志，它会说所有数据都有 null，除了 collections。

但是如果我在本地环境中检查控制台日志，所有数据都存在。

为什么会这样？这似乎是 gatsby 或 vercel 问题。

// 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`
  ]
};

更新： Node v14.x 在我的本地环境中运行，并尝试在 Vercel 上选择 Node 版本 12。

许多警告消息都消失了，但我没有运气。

我认为奇怪的是我可以看到 develop 和 build 之间的内容节点差异。

如您所见，它在本地端运行 npm run dev 时创建了 128 个内容节点。

否则，它只在 Vercel 上创建了 100 个内容节点。

我不确定这是否是主要问题。

但基本上 gatsby 对内容节点有限制规则？

解决方法

为什么会这样？这似乎是 gatsby 或 vercel 问题。

提供的详细信息很难说。在我看来，Vercel 服务器似乎正面临某些 GraphQL 查询/产品/节点（警告）的超时响应，因此这可能是一种共同的罪恶感。

为了同时调试并尝试修复问题，考虑到项目在本地运行良好，我会尝试匹配环境，从设置相同的 Node 版本开始。这将确保您运行相同的依赖版本。

Vercel 允许您从后台或通过在 node 中的 engine 对象内设置 package.json 属性来配置 Node 版本。来自docs：

在 node 文件的引擎内定义 package.json 属性 将覆盖在项目设置中所做的选择并打印 如果版本不匹配，则生成步骤警告。

为了找出您的 Deployment 使用的是哪个 Node.js 版本， 在构建命令中运行 node -v 或记录输出 process.version。

所以添加：

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

作为运行 12.x 命令时的 node -v 提示版本。

希望这能解决您的问题，但如果不能，它将帮助您更好地调试。