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

Posted

技术标签:

【中文标题】gatsby 无法获取所有关于 vercel 生产的 graphql 数据【英文标题】:gatsby can't fetch all graphql data on vercel production 【发布时间】:2021-09-27 15:37:52 【问题描述】:

我正在使用 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。

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

我觉得奇怪的是,我可以看到 developbuild 之间的内容节点差异。

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

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

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

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

【问题讨论】:

【参考方案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 的提示版本。

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

【讨论】:

你好。谢谢你回答我的问题。 Chaning Node 版本没有修复它,但我可以看到许多警告消息消失了。请查看UPDATE: 尝试在本地使用 Serverless 在本地复制 Vercel:vercel.com/blog/vercel-dev 尝试在本地复制 Vercel 工作正常。但是 Vercel 生产不起作用。 一开始,我链接了当前的Vercel项目,使用vercel env pull。它创建了.env 文件并复制了变量。之后,我使用了vercel dev。我能够看到同样的问题。它只有 100 个内容节点。 老实说,我们需要一个最小的可重现示例。使用提供的信息进行调试几乎是不可能的。

以上是关于gatsby 无法获取所有关于 vercel 生产的 graphql 数据的主要内容,如果未能解决你的问题,请参考以下文章

Gatsby 有没有办法将内联样式组件 CSS 导出到 CSS 文件中?

无法在 Vercel 上使用 serverSideTranslations

Vercel中的Nodemailer不在生产中发送电子邮件

尝试使用 `gatsby-source-mongodb` 从 MongoDB 获取数据到 Gatsby

如何在 Gatsby 中获取所有 Wordpress 帖子和显示标签

Gatsby 总是获取缓存的数据