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

问题描述

我正在使用Gatsby和Contentful开发一个 Headless 电子商务网站。Shopify和机舱。

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

这就是我的意思是，所有的graphql数据都可以在本地获取npm run build，但它不会编译生产中的所有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`
  ]
};

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

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

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

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

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

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

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

标签： reactjsgraphqlgatsbyvercelnacelle

解决方案

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

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

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

Vercel 允许您从后台或通过node在. 从文档：enginepackage.json

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

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

所以添加：

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

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

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

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

问题描述

解决方案

推荐阅读