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

Question

我正在使用 Gatsby、Contentful 开发无头电子商务网站。 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 对内容节点有限制规则？

Answer 1

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

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

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

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

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

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

所以添加：

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

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

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